Fixed div when scrolling down page

Asked

Viewed 16,599 times

2

I’d like to know how to leave one div fixed on the side when scrolling the page down.

What I want to do is exactly like the side newsletter of that page.. . When rolling down you’ll understand better what I’m talking about.

I am using wordpress and already tried to use some codes and , but not without much success.

javascript css div

  • Exactly this page uses a plugin: http://bigspotteddog.github.io/ScrollToFixed/ - but this is not difficult to do. If you put your code you will get a more personalized answer.

  • Cool Sergio.. I’ll test it. Thank you!

3 answers

4

I think that solves

<body style="height:2000px">
<style type="text/css">
.newsletter{position:fixed; bottom:15%; left:10%; width:220px; height:300px; background:#000;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 300) {
                $('.newsletter').fadeIn();
            } else {
                $('.newsletter').fadeOut();
            }
        });
    });
</script>
<div class="newsletter"></div>
</body>

You just have to say the desired height, in this case 300px.

  • I hadn’t seen the comments, but it’s easy, in place of the bottom poe top 0

  • Hi Dexxt.. Thanks for your expensive answer worked out! But there is a little problem.. When I reload the page the box div appears at the top. How do I make it not appear when reloading the page? Thank you.

  • try this here see if it helps you $(window). load(Function(){ $('. newsletter'). css('display','None'); }); when the page is loaded it disappears, but this is for when the page is fully loaded, try to find one of only the page loaded try this here tbm: $(Document). ready(Function(){ $('. newsletter'). css('display','None'); });

  • I posted the solution that I found Dexxtz. Forced by force ;] hugs!

2

Hello, it is possible to do capturing the scroll event and check if the scrollTop is larger than the size you want.
I would use the following code

$(function(){

    var jElement = $('.element');

    $(window).scroll(function(){
        if ( $(this).scrollTop() > 300 ){
            jElement.css({
                'position':'fixed',
                'top':'300px'
            });
        }else{
            jElement.css({
                'position':'relative',
                'top':'auto'
            });
        }
    });

});

Where we save the variable of our element with the jElement, we check when the user scrolls on the page with $(window).scroll(); and check if the scroll is larger than 300 (you can switch to any value you want) with $(this).scrollTop(); see an example working here:
http://jsfiddle.net/Wagner/cwzVQ/embedded/result/

  • It helped me a lot in increasing my code Wagner.. Thank you.. hugs!

-1


The solution that served me was a mixture of Dexxtz’s response with Wagner’s. So he got this scroll function with fadin and fadeout.

For first I had implemented the dexxtz code, but when loading the page the div box appeared first at the top. So I made a change based on what Wagner posted.

You can view the commented code and simulate it here or on jsfiddle:

   $(function () {
       //incluso essa variavel para setar atributos do css depois
       var elemento = $('.element');

       $(window).scroll(function () {
           //distancia que o scroll devera rolar para aparecer o box da div
           if ($(this).scrollTop() > 300) {
               //bloco incluso para setar o css
               elemento.css({
                   'position': 'fixed',
                       'bottom': '15%'
               });

               $('.element').fadeIn();
           } else {
               $('.element').fadeOut();
           }
       });
   });
body {
    height: 5000px;
    font: 13px verdana, sans-serif;
}
div {
    margin: 10px;
}
.other {
    width: 200px;
    padding: 3em;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-top: #4898c6 3px solid;
    text-align: center;
}
.element {
    width: 200px;
    padding: 3em;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-top: #dc0000 3px solid;
    text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="other">Outros conteúdos</div>
<div class="other">Outros conteúdos</div>
<div class="other">Outros conteúdos</div>
<div class="other">Outros conteúdos</div>
<div class="other">Outros conteúdos</div>
<div class="other">Outros conteúdos</div>
<div class="element">Conteúdo</div>

Browser other questions tagged javascript css div

You are not signed in. Login or sign up in order to post.