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 に答える