CODEWITHSUNDEEP
javascriptjquerycss-position
Tom
Tom

Reputation: 12998

Toggle position fixed depending on scroll position

I have the following code which fixes the position of a menu at the point that it is going to scroll off the top of the page.

$(function () {
    var msie6 = $.browser == 'msie' && $.browser.version < 7;
    if (!msie6) {
    var top = $('.menu').offset().top - parseFloat($('.menu').css('margin-top').replace(/auto/, 0));
    $(window).scroll(function (event) {
    var y = $(this).scrollTop();
    if (y >= top) {
    $('.menu').addClass('fixed');
    } else {
    $('.menu').removeClass('fixed');
    }
    });
    }
});

css

.container {
    width:400px; 
    margin:auto;
}

.header {
    background-color:#096; 
    height:150px;
}

.fixed {
    position:fixed;
    top:0px;
    left:50%;
    margin-left:50px;
}

.bodyContainer {
    overflow:hidden;
}

.menu {
    float:right; 
    width:150px; 
    height:250px; 
    background-color:#F00;
}

.bodyCopy {
    float:left; 
    width:250px; 
    height:1000px;
}

.footer {
    background-color:#096; 
    height:250px;
}

HTML

<div class="container">

<div class="header">
    <p>Test Header</p>
</div>

<div class="bodyContainer">

    <div class="menu">
        <p>test</p>
    </div>

    <div class="bodyCopy">
        <p>test</p>
    </div>

</div>


<div class="footer">
    <p>Test Footer</p>
</div>

What I now want to do is make it start scrolling again when the user reaches the bottom of the page (so that it does not cover the footer in the page).

jsfiddle here...

Upvotes: 2

Views: 14950

Answers (2)

kongaraju
kongaraju

Reputation: 9596

Here is new a approach with css3.

use position:sticky to follows the scroll.

Here is the article explained.

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

and old way of doing this demo

with sticky position demo

Upvotes: 7

SeanCannon
SeanCannon

Reputation: 77996

var top = $('.menu').offset().top - parseFloat($('.menu').css('margin-top').replace(/auto/, 0));
var _height = $('.menu').height();
$(window).scroll(function(event) {
    var y = $(this).scrollTop();
    var z = $('.footer').offset().top;
    if (y >= top && (y+_height) < z) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});

http://jsfiddle.net/AlienWebguy/CV3UA/1/

If you want the menu to simply stay where it is when it reaches the footer you'll need to add more logic to append it into the DOM:

var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
    var top = $('.menu').offset().top - parseFloat($('.menu').css('margin-top').replace(/auto/, 0));
    var _height = $('.menu').height();
    var _original_top = $('.menu').offset().top;
    $(window).scroll(function(event) {
        var y = $(this).scrollTop();
        var z = $('.footer').offset().top;
        if (y >= top && (y + _height) < z) {
            $('.menu').insertBefore($('.bodyCopy')).removeClass('stuck-bottom').addClass('fixed');
        } else {
            if ((y + _height) >= z) {
                $('#menu').insertBefore($('.footer')).removeClass('fixed').addClass('stuck-bottom');
            }
            else $('.menu').insertBefore($('.bodyCopy')).removeClass('stuck-bottom').removeClass('fixed');
        }
    });
}

I'm sure there's a more elegant way to do this. Play around :) http://jsfiddle.net/AlienWebguy/CV3UA/2/

Upvotes: 3

Related Questions