Remove Bounce on Scroll in Browser, Issue with Position:Fixed Div

Remove bounce on scroll in browser, issue with position:fixed div

Bounce scroll in the browser is a feature of some versions of iOS / macOS.

To prevent it from happening on a website we can use the following:

CSS

html, body {
    height: 100%;
    overflow: hidden;
}

#main-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}

HTML

<body>
    <div id="main-container">
        ...
    </div>
</body>

Demo

Remove bounce on scroll in browser, issue with position:fixed div

Bounce scroll in the browser is a feature of some versions of iOS / macOS.

To prevent it from happening on a website we can use the following:

CSS

html, body {
    height: 100%;
    overflow: hidden;
}

#main-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}

HTML

<body>
    <div id="main-container">
        ...
    </div>
</body>

Demo

Scroll Bouncing With Fixed Positioning

I gotta be honest, I understand your problem but I have no idea when and why you'd run into this exact behavior. That said, here's my workaround and some notes:

The height of your content needs to be 2x the height of fixed element in order to maintain the scrollbar. Otherwise, once the element is fixed, your document entirely loses the scrollbar.
I'm saving the original offset of fixed element to a variable that is used as a marker for future reset. However, I am also redefining the $stickyChainOffset in every scroll event, that you used to define only once. I'm doing this because it changes once fixed.
You can comment and uncomment the padding I saved in css to see how the page behaves in various cases.

If you have any other questions, let me know.

https://jsfiddle.net/1fke1j3d/1/

Css transition makes my fixed header bounce in Chrome. is there anything I can do to fix it?

You don't have to mess with the z-index via Javascript at all. Just use a z-index of 0, order the images in the desired sequence and add a class to change opacity via Javascript.

Only add the class to the image which shall appear:

$(window).scroll(function () {      
    if ($(window).scrollTop() > 400) {
        $(".image1").addClass("top");
    } else {
        $(".image1").removeClass("top");
    }
});

Dont't use negative z-index and don't change z-index in added class:

.image1, .image2 {
    z-index:0;   
}
.top {
    opacity:1;
}

Sticky navigation element jumps during scroll

After seeing you asking for help on another answer, I will try and explain more clearly for you.

The Problem

Your problem is when you add position:fixed to the navigation bar, it removes it from its place and sticks it at the top of the page. This is why the rest of your content jumps up - because the navigation bar is not where it was anymore.

How To Fix

You can get around this by wrapping your navigation element in a new div - let's call it nav-wrapper - and set its height to the same as your navigation element. These are known as placeholder elements. This new wrapper and your original navigation bar must always be the same height for the 'jump' to disappear.

<div class="nav-wrapper" style="height:80px;"> <-- add this

    <div class="your-original-nav" style="height:80px"></div>

</div> <!-- add this

Now, when you set the navigation bar to fixed and it disappears to the top, the new wrapper we created with the same height keeps the page's content the same. When the fixed class has been removed, it sits back in the wrapper again, without pushing the content down.

A Suggestion

From what I can see on your site, there will be a big gap where the navigation bar was until the new fixed navigation reaches that point and covers it. What you want, is a little jQuery to figure out where to make the navigation fixed and where to hide it. I'll explain:

// cache the element
var $navBar = $('.your-original-nav');

// find original navigation bar position
var navPos = $navBar.offset().top;

// on scroll
$(window).scroll(function() {

    // get scroll position from top of the page
    var scrollPos = $(this).scrollTop();

    // check if scroll position is >= the nav position
    if (scrollPos >= navPos) {
        $navBar.addClass('fixed');
    } else {
        $navBar.removeClass('fixed');
    }

});

You may want to add further functionality to this example, as it is very, very basic. You would probably want to recalculate the offsets on window resize as one addition.

A Demo

This is a little demo which might help you - I was bored and feeling helpful :)

How to prevent white space bounce after scrolling to the top of the page and the bottom

I had similar issue this worked for me.

html {
    overflow: hidden;
    height: 100%;
}

body {
    overflow: auto;
    height: 100%;
}

Remove Bounce on Scroll in Browser, Issue with Position:Fixed Div

Remove bounce on scroll in browser, issue with position:fixed div

Remove bounce on scroll in browser, issue with position:fixed div

Scroll Bouncing With Fixed Positioning

Css transition makes my fixed header bounce in Chrome. is there anything I can do to fix it?

Sticky navigation element jumps during scroll

How to prevent white space bounce after scrolling to the top of the page and the bottom

Related Topics

Leave a reply