21

ページを下にスクロールするとき、および 2 番目の div が上部の境界に達したときに、2 番目の div を貼り付けたいと思いました。修正されると、他のページと一緒にスクロールするはずです。どうすればこれを達成できますか？

#settings{
    width:100%;
    background:#383838;
    height:60px;
}
#menu{
    width:100%;
    position:relative;
    height:100px;
    background:#aaa;
}
#body-content{
    height:900px;
    position:relative;
}

そしてHTML

<body>
<div id="top">
    <div id="settings">
    </div>
    <div id="menu">
    </div>
</div>
<div id="body-content">
</div>

</body>

この例http://jsfiddle.net/WBur3/では、ページをスクロールするときに 2 番目の div を修正する必要があります。上にスクロールすると、前の状態そのものに変わるはずです。私を助けてください。

4

4 に答える 4

54

でこの効果を得ることができますjquery

$(function(){
        // Check the initial Poistion of the Sticky Header
        var stickyHeaderTop = $('#stickyheader').offset().top;

        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('#stickyheader').css({position: 'fixed', top: '0px'});
                        $('#stickyalias').css('display', 'block');
                } else {
                        $('#stickyheader').css({position: 'static', top: '0px'});
                        $('#stickyalias').css('display', 'none');
                }
        });
  });

デモはこちら

注:ページに jquery ライブラリ リンクを含めることを忘れないでください (初心者と仮定して)

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
于 2013-01-24T07:49:15.093 に答える
4

ここにコメントを追加しますが、それを行うのに十分な評判がありません。プロジェクトで似たようなものが必要だったので、変更を@Sowmyaの回答に共有すると思いました。コードを少しきれいにして、スクロール効果をよりスムーズにしました。JSフィドル

$(function () {
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#stickyheader').offset().top;

    $(window).scroll(function () {
        if ($(window).scrollTop() > stickyHeaderTop) {
            $('#stickyheader').css({
                position: 'fixed',
                top: '0px'
            });
            $('#othercontent').css('margin-top', $('#stickyheader').outerHeight(true) + parseInt($('#unstickyheader').css('marginBottom')));
        } else {
            $('#stickyheader').css({
                position: 'static',
                top: '0px'
            });
            $('#othercontent').css('margin-top', '0px');
        }
    });
});
body {
    font: 13px sans-serif;
}
#stickyheader {
    width: 100%;
    height: 40px;
    background:black;
    color:white;
    margin-bottom: 10px;
}
#unstickyheader {
    margin-bottom: 15px;
}

于 2015-01-08T21:42:05.783 に答える
0

`なし

    <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
    /* Note: Try to remove the following lines to see the effect of CSS positioning */
    .affix {
      top: 0;
      width: 100%;
    }
    .affix + .container-fluid {
      padding-top: 70px;
    }
    </style>
    </head>
    <body>
    <div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
    <h1>Bootstrap Affix Example</h1>
    <h3>Fixed (sticky) navbar on scroll</h3>
    <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
    <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
    </div>

    <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
    <ul class="nav navbar-nav">
    <li class="active"><a href="#">Basic Topnav</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    </ul>
    </nav>
    <div class="container-fluid" style="height:1000px">
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    </div>
    </body>
    </html>

`、上記のコードを使用してこれを行うことができます。

于 2016-07-01T08:54:51.683 に答える
0

メニュー div に ID を割り当てます。

 <div id ="menuContainer">

プロジェクトとページに jquery を含めます。

<script src="Scripts/jquery-1.11.3.min.js" type="text/javascript"></script>

以下は、目的の効果を実装するためのコードです。

<script type="text/javascript">

    $("document").ready(function ($) {

        // On document load get the position of the div u want to stick on certain position
        var offsets = document.getElementById('menuContainer').getBoundingClientRect();

        // Get position from top of browser
                var topoffsets = offsets.top;

                // Binding fuction to windows scroll event
                $(window).bind('scroll', function () {

                    if ($(window).scrollTop() > topoffsets) {

                               $("#menuContainer").css({ top: 0, position: 'fixed' });

                            } else {
                               $("#menuContainer").css({ top: '', position: '' });
                            }
                });
    });

于 2015-06-08T13:14:18.077 に答える