Bootswatch模板中的滚动效果

Question

我正在尝试做一个元素固定在顶部，当用户滚动超出元素的高度，根据此页面http://bootswatch.com/simplex/中的"#subnav“div

环顾google，我设法形成了以下函数和代码。

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放在哪里。假设它将是top: 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");
        }
    }
});