Position Fixed - return to where you were with the mouse scroll

Asked

Viewed 28 times

0

I have this script in Jquery that when the mouse scroll goes through it determined div, leaves fixed a div with position:Fixed.

Ali emabaixo has STOP HERE, that’s where I want you to go back to the place, how can I do

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
        $('#sticky-anchor').height($('#sticky').outerHeight());
    } else {
        $('#sticky').removeClass('stick');
        $('#sticky-anchor').height(0);
    }
}

$(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});
#sticky {
    padding: 0.5ex;
    width: 600px;
    background-color: #333;
    color: #fff;
    font-size: 2em;
    border-radius: 0.5ex;
}

#sticky.stick {
    margin-top: 0 !important;
    position: fixed;
    top: 0;
    z-index: 10000;
    border-radius: 0 0 0.5em 0.5em;
}

body {
    margin: 1em;
}

p {
    margin: 1em auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque, lectus in pharetra blandit, augue mauris pulvinar erat, ut euismod nibh lectus sed diam. Nulla fringilla ultrices ligula. Aliquam vitae felis metus. Maecenas lacinia bibendum
    accumsan. Curabitur lobortis convallis purus non imperdiet. Morbi ut vulputate mauris. Curabitur lacinia faucibus volutpat. Nulla elit tortor, rhoncus ut luctus eget, blandit in risus. Integer accumsan ullamcorper lorem id porttitor. Aliquam vitae
    libero eget magna mollis gravida.
</p>
<div id="sticky-anchor"></div>
<div id="sticky">This will stay at top of page</div>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, justo at ornare bibendum, magna lectus cursus felis, tristique consectetur arcu justo at augue.
    Mauris ultrices mollis sem eget elementum. Sed ipsum orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam pulvinar nisl, vitae congue velit ultricies
    eget.
</p>


<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices mauris porta. Duis vel neque
    ipsum. Vestibulum eu blandit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
    egestas.
</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar. Nunc sit amet nulla urna.
    Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus.
    Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis
    eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu,
    sit amet sodales risus leo quis nisi.</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, justo at ornare bibendum, magna lectus cursus felis, tristique consectetur arcu justo at augue.
    Mauris ultrices mollis sem eget elementum. Sed ipsum orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam pulvinar nisl, vitae congue velit ultricies
    eget.
</p>
<div class="parar">

<p>
<B>PARAR AQUI</B>
</p>

</div>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices mauris porta. Duis vel neque
    ipsum. Vestibulum eu blandit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
    egestas.
</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar. Nunc sit amet nulla urna.
    Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus.
    Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis
    eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu,
    sit amet sodales risus leo quis nisi.</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, justo at ornare bibendum, magna lectus cursus felis, tristique consectetur arcu justo at augue.
    Mauris ultrices mollis sem eget elementum. Sed ipsum orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam pulvinar nisl, vitae congue velit ultricies
    eget.
</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices mauris porta. Duis vel neque
    ipsum. Vestibulum eu blandit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
    egestas.
</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar. Nunc sit amet nulla urna.
    Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus.
    Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis
    eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu,
    sit amet sodales risus leo quis nisi.</p>

jquery

  • It was not clear. The div is fixed when going through the scroll... when returning the scroll it goes back to the place, leaving to be fixed... what would be the doubt?

  • notice that there emabaixo has TO STOP HERE, that’s where I want it to go back to the place

  • Oh yes... it would be good to put this in the question to be clearer.

1 answer

1


You can take the position of scroll window and decrease by the position of the div #parar against the top of the document. When the result is greater than 0, withdraw the class .stick of div fixed, which will return to the natural position:

var parar_top = window_top - $('.parar').offset().top;

To this end, it is sufficient to insert a second mandatory condition (&&) in the if:

if (window_top > div_top && parar_top < 0) {...

Behold:

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;

    var parar_top = window_top - $('.parar').offset().top;

    if (window_top > div_top && parar_top < 0) {
        $('#sticky').addClass('stick');
        $('#sticky-anchor').height($('#sticky').outerHeight());
    } else {
        $('#sticky').removeClass('stick');
        $('#sticky-anchor').height(0);
    }
}

$(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});
#sticky {
    padding: 0.5ex;
    width: 600px;
    background-color: #333;
    color: #fff;
    font-size: 2em;
    border-radius: 0.5ex;
}

#sticky.stick {
    margin-top: 0 !important;
    position: fixed;
    top: 0;
    z-index: 10000;
    border-radius: 0 0 0.5em 0.5em;
}

body {
    margin: 1em;
}

p {
    margin: 1em auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque, lectus in pharetra blandit, augue mauris pulvinar erat, ut euismod nibh lectus sed diam. Nulla fringilla ultrices ligula. Aliquam vitae felis metus. Maecenas lacinia bibendum
    accumsan. Curabitur lobortis convallis purus non imperdiet. Morbi ut vulputate mauris. Curabitur lacinia faucibus volutpat. Nulla elit tortor, rhoncus ut luctus eget, blandit in risus. Integer accumsan ullamcorper lorem id porttitor. Aliquam vitae
    libero eget magna mollis gravida.
</p>
<div id="sticky-anchor"></div>
<div id="sticky">This will stay at top of page</div>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, justo at ornare bibendum, magna lectus cursus felis, tristique consectetur arcu justo at augue.
    Mauris ultrices mollis sem eget elementum. Sed ipsum orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam pulvinar nisl, vitae congue velit ultricies
    eget.
</p>


<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices mauris porta. Duis vel neque
    ipsum. Vestibulum eu blandit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
    egestas.
</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar. Nunc sit amet nulla urna.
    Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus.
    Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis
    eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu,
    sit amet sodales risus leo quis nisi.</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, justo at ornare bibendum, magna lectus cursus felis, tristique consectetur arcu justo at augue.
    Mauris ultrices mollis sem eget elementum. Sed ipsum orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam pulvinar nisl, vitae congue velit ultricies
    eget.
</p>
<div class="parar">

<p>
<B>PARAR AQUI</B>
</p>

</div>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices mauris porta. Duis vel neque
    ipsum. Vestibulum eu blandit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
    egestas.
</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar. Nunc sit amet nulla urna.
    Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus.
    Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis
    eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu,
    sit amet sodales risus leo quis nisi.</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, justo at ornare bibendum, magna lectus cursus felis, tristique consectetur arcu justo at augue.
    Mauris ultrices mollis sem eget elementum. Sed ipsum orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam pulvinar nisl, vitae congue velit ultricies
    eget.
</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices mauris porta. Duis vel neque
    ipsum. Vestibulum eu blandit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
    egestas.
</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar. Nunc sit amet nulla urna.
    Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus.
    Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis
    eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu,
    sit amet sodales risus leo quis nisi.</p>

Browser other questions tagged jquery

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