根据Bootswatch模板滚动效果

Question

当用户按照此页面中的“#subnav”div滚动超出元素高度时，我正在尝试将元素固定到顶部http://bootswatch.com/simplex/

环顾谷歌，我设法形成以下功能和代码。

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    if(docViewTop >= elemBottom){
    return true;
    }else{
    return false;
    }
}

$(window).scroll(function(){
    if(!$("#search_menu").hasClass("subnav-fixed")){
        if(!isScrolledIntoView($("#search_menu"))){
            $("#search_menu").addClass("subnav-fixed");
        }       
    }else{

        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        $("#window_top").html(docViewTop);
        $("#window_bottom").html(docViewBottom);
        $("#height").html(element_frm_top);

        if(docViewTop < element_frm_top < docViewBottom){
            $("#search_menu").removeClass("subnav-fixed");
        }
    }
});

使用此。我能够添加类subnav-fixed并将div位置固定在顶部。但滚动后，我无法让它恢复到原来的位置。想知道哪里出了问题，或者其他人有更好的解决方案。

Answer 1

我认为应该是

$(window).scroll(function(){
    if(!$("#search_menu").hasClass("subnav-fixed")){
        if(!isScrolledIntoView($("#search_menu"))){
            $("#search_menu").addClass("subnav-fixed");
        }       
    }else{
        if(isScrolledIntoView($("#search_menu"))){
            $("#search_menu").removeClass("subnav-fixed");
        }
    }
});

没有测试过。

另请考虑将if(docViewTop >= elemBottom)更改为if(docViewTop >= elemTop)

修改

这取决于你放置#search_menu的位置。假设它将是最高的：40px它应该是：

http://jsfiddle.net/mattydsw/yDPeZ/

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top - 40;
    var elemBottom = elemTop + $(elem).height();

    if (docViewTop >= elemTop) {
        return true;
    } else {
        return false;
    }
}

$(window).scroll(function () {
    var $body = $('body'),
        $menu = $("#search_menu");
    if (!$menu.hasClass("subnav-fixed")) {
        if (isScrolledIntoView($menu)) {
            $menu.addClass("subnav-fixed");
        }
    } else {
        if ($(window).scrollTop() <= 40) {
            $menu.removeClass("subnav-fixed");
        }
    }
});