Floating div is not working right

Asked

Viewed 688 times

4

Ilustração do que estou criando

I need to create a floating div in the left corner of the site. However, it is in the middle of the site and will only follow the scrolling from one point to another. As in the image illustrating, the floating div has to go from the beginning of the content to the end of it, stopping before the "bar".

I tested some codes I found on the internet but none worked right, so I kind of tried to make some adjustments of my own.

I’m using this jQuery code:

 var cartaz = SC(".cartaz-flutuante");
        SC(window).scroll(function(){            
            var topo_cartaz = cartaz.offset().top;
            var y_fixo = 40;
            if (topo_cartaz < 40) {
                cartaz.animate({
                    top: y_fixo+SC(document).scrollTop()+"px"
                    },{duration:500,queue:false}
                );
            }
        });

The height of '40" is just a margin to give the div, not to stay fully leaned. And that "if" I tried to do for when the page height gets smaller than the margin, the div slip effect starts to work... Only it’s not working... And if I take the if, it works, but then gets high and the floating div goes away if I give a full scroll of the site.

jquery html css div

  • If you align the contents box to the right and put the floating div as position: Fixed, it does not solve?

  • The html css structure is very basic, as in the drawing. The floating div is "float left" and the content "float right". The div is already in Absolute, what I can do is leave as "Fixed", dai sim ela acompanha o scroll.. the problem is that it has no effect, and I need to control the movement limit, since it is fixed on the site as a whole, going from header to footer, and not only where I want.

  • 1

    could put an example in Jsfiddle?

  • I took the @Freddutra suggestion and tried to create my own code. It can be viewed here: http://jsfiddle.net/rmugb3j0/ but it didn’t work! HAHA I don’t know why. Still, you can get a sense of what my code is like. The floating div slides with the page and stops at the end of the content div, as scheduled. The problem is that when I scroll up, the div does not go back to follow.. How do I do?

3 answers

3

I believe there is a possibility to do this without adding Plugins.

HTML

<div class="conteudo">Conteúdo da div</div>
<div class="conteudo">Conteúdo da div</div>
<div class="conteudo">Conteúdo da div</div>
<div id="fixa_temporaria">Esta div é estática</div>
<div class="conteudo">Conteúdo da div</div>
<div class="conteudo">Conteúdo da div</div>
<div class="conteudo">Conteúdo da div</div>

CSS

body {margin: 0; padding: 0}
.conteudo{width: 100%; height: 300px; margin-bottom: 12px;}
#fixa_temporaria{width: 300px;  background: black; color: white; padding: 6px; position: relative; bottom: 0px; left: 0px;}

JS

var sticky_offset;
$(document).ready(function() {

    var original_position_offset = $('#sticky_for_a_while').offset();
    sticky_offset = original_position_offset.top;
    $('#fixa_temporaria').css('position', 'fixed');


});

$(window).scroll(function () {
    var sticky_height = $('#fixa_temporaria').outerHeight();
    var where_scroll = $(window).scrollTop();
    var window_height = $(window).height();


    if((where_scroll + window_height) > sticky_offset) {
        $('#fixa_temporaria').css('position', 'relative');
    }

    if((where_scroll + window_height) < (sticky_offset + sticky_height))  {
        $('#fixa_temporaria').css('position', 'fixed');
    }

});

See if this works.. I haven’t tested it yet.

Tip: avoid using plugins, they weigh in, give problems frequently and you have no total control over them.

  • Exactly. The site already has enough plugin and did not want to use one more for something simple. I haven’t tested yet, but as soon as I have time, I test and comment again. Thanks :D

  • I took the @Freddutra suggestion and tried to create my own code. It can be viewed here: http://jsfiddle.net/rmugb3j0/ but it didn’t work! HAHA I don’t know why. Still, you can get a sense of what my code is like. The floating div slides with the page and stops at the end of the content div, as scheduled. The problem is that when I scroll up, the div does not go back to follow.. How do I do?

3


  • Poisé, but my site is already with enough plugin and did not want to add one more. Apparently I will have to use even, rsrs. Thanks, I’ll take a look at these links.

  • I took the @Freddutra suggestion and tried to create my own code. It can be viewed here: http://jsfiddle.net/rmugb3j0/ but it didn’t work! HAHA I don’t know why. Still, you can get a sense of what my code is like. The floating div slides with the page and stops at the end of the content div, as scheduled. The problem is that when I scroll up, the div does not go back to follow.. How do I do?

2

What you’re doing wrong is using the property position:absolute, using the position set as absolute the float doesn’t work.

  • Bah, now I can’t test using my old model. I ended up using a plugin. Thanks.

Browser other questions tagged jquery html css div

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