74

ユーザーがページを下にスクロールすると、ボックスが右または左にポップアップする Web サイトをいくつか見ました...

また、次のテンプレートにも注目してください: http://www.mvpthemes.com/maxmag/デザイナーは、ナビゲーション バーを上部に固定したままにしておきます。

さて、これらはどのように行われますか？ページの位置を取得してボックスを表示するためにjqueryを使用していると思います。

そのようなことを学ぶことができるように、スニペットを見つけることができる場所に私を案内してもらえますか.

4

12 に答える 12

161

この効果は通常、次のような jquery ロジックを使用することで実現されます。

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > 50) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});

これは、ウィンドウが一定数の垂直ピクセルを超えてスクロールすると、その位置の値を「固定」に変更するクラスをメニューに追加することを示しています。

完全な実装の詳細については、http: //jsfiddle.net/adamb/F4BmP/を参照してください。

于 2012-11-07T17:31:36.263 に答える
21

この例では、メニューを中央に表示できます。

HTML

<div id="main-menu-container">
    <div id="main-menu">
        //your menu
    </div>
</div>

CSS

.f-nav{  /* To fix main menu container */
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}
#main-menu-container {
    text-align: center; /* Assuming your main layout is centered */
}
#main-menu {
    display: inline-block;
    width: 1024px; /* Your menu's width */
}

JS

$("document").ready(function($){
    var nav = $('#main-menu-container');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 125) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });
});
于 2013-03-04T02:54:42.347 に答える
15

CSS ルールを使用することもできます。

position: fixed ;とtop: 0px ;

あなたのメニュータグに。

于 2012-11-07T17:31:08.937 に答える
7

または、より動的な方法でこれを行います

$(window).bind('scroll', function () {
    var menu = $('.menu');
    if ($(window).scrollTop() > menu.offset().top) {
        menu.addClass('fixed');
    } else {
        menu.removeClass('fixed');
    }
});

CSSでクラスを追加

.fixed {
    position: fixed;
    top: 0;
}
于 2016-04-26T06:38:06.067 に答える
2

これは、ブラウザの上部に触れたときに div を修正するために使用される jquery コードです。大いに役立つことを願っています。

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function() {
    $.fn.scrollBottom = function() {
        return $(document).height() - this.scrollTop() - this.height();
    };

    var $el = $('#sidebar>div');
    var $window = $(window);
    var top = $el.parent().position().top;

    $window.bind("scroll resize", function() {
        var gap = $window.height() - $el.height() - 10;
        var visibleFoot = 172 - $window.scrollBottom();
        var scrollTop = $window.scrollTop()

        if (scrollTop < top + 10) {
            $el.css({
                top: (top - scrollTop) + "px",
                bottom: "auto"
            });
        } else if (visibleFoot > gap) {
            $el.css({
                top: "auto",
                bottom: visibleFoot + "px"
            });
        } else {
            $el.css({
                top: 0,
                bottom: "auto"
            });
        }
    }).scroll();
});
});//]]>  

</script>
于 2012-12-27T10:31:11.940 に答える
1

nav でこれを試すことができますdiv：

div.fixed{
    postion: fixed;
    top: 0;
    width: 100%;
}
于 2015-09-28T11:26:47.967 に答える