Question

我想在导航位置和滚动位置相等时将导航位置固定在顶部。

请让我知道如何获得导航和页面滚动位置的位置？我想要这样的事情：http://new.livestream.com/live-video-tools

我试过了：

$(function() {

    // grab the initial top offset of the navigation 
    var sticky_navigation_offset_top = $('#main-heading').offset().top;

    // our function that decides weather the navigation bar should have "fixed" cs s position or not.
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top

        // if we've scrolled more than the navigation, change its position to fixed to stick to top,
        // otherwise change it back to relative
        if(scroll_top > sticky_navigation_offset_top) { 
            $('#fixed_nav').css({ 'position': 'fixed', 'top':6, 'left':0, 'width':'100%', 'z-index':999, 'height':80,  'background':'#fff' });
        } else {
            $('#fixed_nav').css({ 'position': '','overflow': 'visible', 'display':'block','height':80}); 
        }          
    };

    // run our function on load
    sticky_navigation();

    // and run it again every time you scroll
    $(window).scroll(function() {
        sticky_navigation();
    });
});

Answer 1

这已经过时了，但是对于Google员工而言应该得到答案。益处。

See Fiddle here.

$(function () {
    var offset = $('#nav').offset().top;
    var nav = function () {
        var scroll = $(window).scrollTop();
        if (scroll < offset) {
            $('#nav').css({ 'position': 'relative' });
        }
        else {
            $('#nav').css({ 'position': 'fixed', 'top': 0 });
        }
    };
    nav();
    $(window).scroll(function () {
        nav();    //this ensures we check again every time the user scrolls
    });

});

OP - 你现在可能已经知道了，但是我不确定你为什么要检查#main-heading的偏移然后设置另一个#fixed-nav的位置，那就是＆＃39 ; s可能是你发行的地方。

滚动时修复导航位置

1 个答案: