0

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

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

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 位置固定到顶部。但我无法让它在向上滚动后返回到原来的位置。想知道哪里出了问题，或者其他人是否有更好的解决方案。

4

1 回答 1

0

我认为应该是

$(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");
        }
    }
});
于 2013-06-29T13:23:08.477 回答