web-dev-qa-db-fra.com

comment puis-je coller la div après avoir fait défiler un peu

Je voulais coller la deuxième div lorsque nous faisons défiler la page et lorsque la deuxième div rencontre la limite supérieure. Quand il est corrigé, il devrait défiler avec les autres pages. Comment puis-je atteindre cet objectif?

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

et le HTML 

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

</body>

Ici, dans cet exemple http://jsfiddle.net/WBur3/ , la deuxième div doit être corrigée lorsque nous faisons défiler la page. Lorsque nous faisons défiler vers le haut, devrait passer à l'état précédent lui-même. Aidez-moi, s'il vous plaît.

javascripthtmlcss
20
user1012181

Vous pouvez obtenir cet effet avec 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');
                }
        });
  });

DEMO ICI

NOTE: N'oubliez pas d'inclure le lien de la bibliothèque jQuery dans votre page (en supposant que vous soyez débutant))

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
53
Sowmya

J'ajouterais un commentaire ici mais je n'ai pas assez de réputation pour le faire. J'avais besoin de quelque chose de similaire dans un projet et je pensais partager mes modifications avec la réponse de @ Sowmya. J'ai nettoyé le code un peu et rendu l'effet de défilement beaucoup plus lisse. JSfiddle

$(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;
}

4
Erik Johnson

Attribuer un identifiant à menu div:

 <div id ="menuContainer">

Inclure jquery dans le projet et sur la page:

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

Ci-dessous le code pour implémenter l'effet désiré:

<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: '' });
                            }
                });
    });

0
Jitendra Sawant

Sans `

    <!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>

`, nous pouvons le faire en utilisant le code ci-dessus.

0
D V Yogesh