logo
down
shadow

Div fadeIn/Out on scroll + visibility on top of page


Div fadeIn/Out on scroll + visibility on top of page

By : Animut Admasu
Date : November 28 2020, 11:01 PM
wish helps you I edited and tried out the code. The best solution is to remove fadeOut:
code :
<script>
$(window).scroll(
    {
        previousTop: 0
    }, 
    function () {
    var currentTop = $(window).scrollTop();
    if ( currentTop == 0 ) {
         $("#menu").addClass('static-on-top');
    } else {
        $("#menu").removeClass('static-on-top');
        if (currentTop < this.previousTop ) {
            $("#menu").fadeIn();
        } else  {
           $("#menu").hide();
       }
    }
    this.previousTop = currentTop;
});
</script>
<style type="text/css">
.static-on-top {
      display: block !important;
}
#menu {
    position: fixed;
    height: 30px;
    background: red;
    width: 100%;
    top: 0;
    left: 0;
}
</style>
<div id="menu">
    Menu
</div>


Share : facebook icon twitter icon
jQuery fadeIn fadeOut makes page scroll

jQuery fadeIn fadeOut makes page scroll


By : user3585131
Date : March 29 2020, 07:55 AM
I wish did fix the issue. Try giving the containing element of the blocks that fade in and fadeout a static height: attribute with CSS.
Wrap
jquery scroll fadeIn footer, hide at bottom of page

jquery scroll fadeIn footer, hide at bottom of page


By : LingyunSun
Date : March 29 2020, 07:55 AM
I wish did fix the issue. I think you'll find it does fire, but the scrollTop event fires when you start scrolling, not when you stop, which is what you want. you can test this: if you scroll to the bottom of your page, stop, and then scroll around just a little bit so that #last remains visible, you should see that #fixedmore stays hidden. The problem is, most of the time your users will be scrolling into #last from further away, so it won't fire.
This plugin by James Padolsey allows for special scroll events like scrollStart and (more importantly!) scrollEnds. Give it a whirl!
FadeIn and FadeOut when page scroll

FadeIn and FadeOut when page scroll


By : Flow33
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , demo: https://so.lucafilosofi.com/fadein-and-fadeout-when-page-scroll/
code :
<style type="text/css">
    #social-icons-wrapper {
    /* CUSTOM PROPERTIES */
    padding:10px;
    text-align:center;
    font-size:20px; 
    background: #000;
    color:#fff;
    width:100%;
    height:32px;
    /* REQUIRED PROPERTIES */
    display:none;
    position: fixed;
    top: 0;
    z-index: 999999;
}
</style>

<div id="social-icons-wrapper"><!-- SOCIAL ICONS HERE --></div>

<script type="text/javascript">
//<![CDATA[
 $(function () {
     $(window).scroll(function () {
         if ($(this).scrollTop() > 100) {
             $('#social-icons-wrapper').stop().fadeIn(200);
         } else {
             $('#social-icons-wrapper').stop().fadeOut(200);
         }
     });
 });
//]]> 
</script>
prevent automatically page scroll up when using jquery fadein/out founction on fixed position div

prevent automatically page scroll up when using jquery fadein/out founction on fixed position div


By : Mukhammad
Date : March 29 2020, 07:55 AM
Does that help That's because of href="#". Use event.preventDefault(); in your handler.
div FadeIn when I'm on page and FadeOut when I scroll

div FadeIn when I'm on page and FadeOut when I scroll


By : learnmore
Date : March 29 2020, 07:55 AM
seems to work fine Get the top position of #bio using .offset().top and then just adjust you if statement to check if $(this).scrollTop() is greater than that.
Related Posts Related Posts :
  • List hover show images jquery
  • Jquery - how to remove content dynamically
  • Parse checkbox change value to Model and then to JSON object on button click in VIEW ASP.Net MVC
  • How to update data of a VueJS instance from a jQuery AJAX call?
  • $.when with dynamic input params and arguments
  • JQuery DataTable1.10.2 white space Issue While Filtering Column Values
  • Get second td of tr using jquery
  • jqGrid change collapce icon
  • Validate field to indian mobile number
  • add- and removeClass on hover with jQuery
  • How do I repeat JQuery Counter when timer finished
  • how to loop through higher order function?
  • How to disable past dates in Bootstrap datetimepicker after set check in date
  • Data Table customising pdf
  • How to set smooth transition of the carousel when reached to end in Slick Carousel?
  • Change scroll speed for specific section and/or button click (SCROLLIFY)
  • Dynamic custom filter not working in codeigniter
  • Show and hide a div in safari using vue js issue
  • Link to another page, scrolled to a div anchor
  • jQuery Date Picker - changing the date relative to each other
  • Passing a variable to init function (variable scope issue)
  • Is it bad practice to stack animations on top of each other?
  • Chrome weird (scaleY) transition behaviour
  • How to have a submit button outside of a form with jquery .on()
  • Change CSS display on windows resize and toggle
  • jQuery getJSON content in new div
  • How to change CSS with jQuery change and this
  • Trying to use appendTo() to push dives to one part of a page, after a first appendTo() is done.
  • Hiding other menu-items when hovering over one - messes with my css-transitions
  • Using button to reset value in a table
  • Value name of select option used as number in function
  • WebDriverException: Unexpected token ':'. Expected ')' to end a argument list when using jQuery :contains with Selenium
  • recieve data in conroller but not showing in kendo grid
  • Have header fade out then in after appending class
  • Jquery Object array accessing in $.each loop
  • Show different color when click on bootstrap accordion
  • TinyMCE inline editor will not appear / classic menu will not work
  • How to readOnly or cancel changeDate event on Bootstrap-datepicker
  • How Count Chracters in WordPress Visual Editor
  • how to trigger a event on clicking dynamically created checkboxes of same group
  • Jquery: random background color
  • How to print the data returning from $.post()?
  • Refactoring js for multiple menus that are not siblings
  • How do I use JQuery to change one html attribute's value to equal a different attribute's value?
  • $('#id').load(function(){}); not working
  • Free jqGrid TreeGrid - Unload Data
  • Appending multiple elements to html
  • How can I validate text boxes to prevent passing empty values?
  • Datepicker enable all date
  • Prevent div overlapping in position:absolute div
  • Attribute returns Undefined in Table
  • datatable sorting on string as number
  • Styling WordPress Contact Form 7 differently depending on page
  • Load button on .hover() but dynamically for each child element
  • jquery select from inserted html
  • jquery find text of nearest span with a certain class
  • Randomly Changing Images from an Array of Images
  • Unsure how to assign JSON object to a url
  • Jquery Sticky side bar won't stick to bottom of website
  • jQuery: Turn off delegated events from original object, with namespace
  • shadow
    Privacy Policy - Terms - Contact Us © soohba.com