web-dev-qa-db-fra.com

Comment faire div fixe après avoir fait défiler jusqu'à cette div?

Comment faire en sorte que div reste fixe après le défilement jusqu'à div? J'ai un div qui se trouve plus tard dans une page et vous devez faire défiler pour atteindre ce div.

Si j'utilise:

.divname {
  position: fixed;
}

Le div apparaîtra avant qu'il n'apparaisse normalement. Peut-être un bon exemple de ce dont j'ai besoin est une deuxième annonce sur 9gag . Si la résolution de votre écran est suffisamment basse, vous ne la verrez pas après le chargement de la page de couverture, mais une fois que vous aurez fait défiler l'écran vers le bas, la seconde annonce apparaîtra et restera fixe pendant le défilement.

javascripthtmlcssscrollcss-position
51
Jakov Mikić

Je sais que ceci est étiqueté html/css uniquement, mais vous ne pouvez pas le faire avec css uniquement. Le moyen le plus simple consiste à utiliser du jQuery.

var fixmeTop = $('.fixme').offset().top;       // get initial position of the element

$(window).scroll(function() {                  // assign scroll event listener

    var currentScroll = $(window).scrollTop(); // get current position

    if (currentScroll >= fixmeTop) {           // apply position: fixed if you
        $('.fixme').css({                      // scroll to that element or below it
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } else {                                   // apply position: static
        $('.fixme').css({                      // if you scroll above it
            position: 'static'
        });
    }

});

http://jsfiddle.net/5n5MA/2/

102
Kaloyan

Ceci est possible avec CSS3. Il suffit d'utiliser position: sticky, comme on le voit ici .

position: -webkit-sticky; /* Safari & IE */
position: sticky;
top: 0;
11
Alexandre Aimbiré

fonction jquery est le plus important

<script>
$(function(){
    var stickyHeaderTop = $('#stickytypeheader').offset().top;

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

Ensuite, utilisez JQuery Lib ...

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

Maintenant, utilisez HTML

<div id="header">
    <p>This text is non sticky</p>
    <p>This text is non sticky</p>
    <p>This text is non sticky</p>
    <p>This text is non sticky</p>
 </div>

<div id="stickytypeheader">
 <table width="100%">
  <tr>
    <td><a href="http://growthpages.com/">Growth pages</a></td>

    <td><a href="http://google.com/">Google</a></td>

    <td><a href="http://yahoo.com/">Yahoo</a></td>

    <td><a href="http://www.bing.com/">Bing</a></td>

    <td><a href="#">Visitor</a></td>
  </tr>
 </table>
</div>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>

Vérifiez DEMO ICI

4
acre
<script>
if($(window).width() >= 1200){
    (function($) {
        var element = $('.to_move_content'),
            originalY = element.offset().top;

        // Space between element and top of screen (when scrolling)
        var topMargin = 10;

        // Should probably be set in CSS; but here just for emphasis
        element.css('position', 'relative');

        $(window).on('scroll', function(event) {
            var scrollTop = $(window).scrollTop();

            element.stop(false, false).animate({
                top: scrollTop < originalY
                    ? 0
                    : scrollTop - originalY + topMargin
            }, 0);
        });
    })(jQuery);
}

Essaye ça ! ajoutez simplement la classe .to_move_content à vous div

1
Shahid Amin

ça a fonctionné pour moi

$(document).scroll(function() {
    var y = $(document).scrollTop(), //get page y value 
        header = $("#myarea"); // your div id
    if(y >= 400)  {
        header.css({position: "fixed", "top" : "0", "left" : "0"});
    } else {
        header.css("position", "static");
    }
});
1
Shuhad zaman