2

私はYelpがMoMapで何をするかをシミュレートしようとしています。

特定の画面スクロール位置に達したときに要素を固定位置にフリップする方法を知っていますが、相対コンテナの底に達したときに固定位置をオフにするにはどうすればよいですか？

cssスティッキーポジションはこれを解決しますが、かなり新しいため、十分なカバレッジがありません。

4

2 に答える 2

7

あなたはこのようなことを試みることができます：小さなリンク。

JavaScriptのコメントバージョンは次のとおりです（注：これはjQueryを使用しますが、必須ではありません。プレーンなJavaScriptバージョンが必要な場合は、いくつかのヒントを提供させていただきます）

var oritop = -100;
$(window).scroll(function() { //on scroll,
    var scrollt = window.scrollY; //get the amount of scrolling
    var elm = $(".box"); //get the box we want to make sticky
    if(oritop < 0) {
        oritop= elm.offset().top; //cache the original top offset
    }
    if(scrollt >= oritop) { //if you scrolled past it,
        elm.css({"position": "fixed", "top": 0, "left": 0}); //make it sticky
    }
    else { //otherwise
        elm.css("position", "static"); //reset it to default positioning
    }
});
于 2012-09-13T15:54:01.057 に答える
0

これを行うには、選択したアイテムにマークを付けます。

スクロール時にメニューを絶対位置に配置し、選択した項目にマークを付ける機能：

jQuery(window).scroll(function () {
    console.log(jQuery(window).scrollTop());
   // x = jQuery("html").scrollTop();  

    x = jQuery(window).scrollTop(); // corrigindo bug do chome

    /* Item marcado de acordo com a rolagem */
    switch (true) {
    case (x >= 600 && x < 2500): // ajuste aqui a area    
        jQuery('.coluna-222-right a').removeClass('ativo');
        jQuery('.coluna-222-right a.programacao').addClass('ativo');           
        break;
    case (x >= 2500 && x < 5000):
        jQuery('.coluna-222-right a').removeClass('ativo');  // ajuste aqui a area 
        jQuery('.coluna-222-right a.palestrantes').addClass('ativo');                  
        break;
    case (x >= 5000 && x < 5765):
        jQuery('.coluna-222-right a').removeClass('ativo');  // ajuste aqui a area 
        jQuery('.coluna-222-right a.local').addClass('ativo');
        break;
    } 


    if (x>40) {     
    jQuery(".coluna-222-right ul").css("position","absolute");
    jQuery(".coluna-222-right ul").css("top",x+20);   // ajuste aqui a posição do menu, pode usar - ao invés de +
    }

    else {          
    jQuery(".coluna-222-right ul").css("position","static");
    jQuery(".coluna-222-right ul").css("top","0");  
        }   

});

クリックした項目を確認してください。

jQuery("a").click(function () {
    jQuery("a").removeClass("ativo");
    jQuery(this).addClass("ativo");

});

http://jsfiddle.net/67fwh/

于 2014-05-27T14:16:23.470 に答える