You can get the position of the headerclass element with $(.headerclass').scrollTop() and then compare that to y in your conditional, instead of 1070.
Example:
if (y > 1070) {
gets replaced with
if (y > $(.headerclass').scrollTop() + 50 )
Solution 1 :
Problem :
I have a fixed div(logo-fixed) that appears when scrolling 1070px from Top, but I don’t want that, I like the div to appear when I scroll 50 pixels after another div(headerclass)
How can this be achieved?
9.
this is the code
(function($) {
$(".logo-fixed").css({"visibility": "hidden"});
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 1070) {
$(".logo-fixed").css({"visibility": "visible"});
$('.logo-fixed').fadeIn(200);
} else {
$('.logo-fixed').hide(0);
}
});
})( jQuery );.headerclass {
position:sticky;
top:0;
z-index:600;
}
.logo-fixed {
position:fixed;
top:0;
left:0;
width:224px;
height:120px;
z-index:1000;
background: url("#");
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}<div class="headerclass"></div>
<div class="logo-fixed"></div>Comments
Comment posted by Heretic Monkey
You can’t scroll something out of the DOM. Out of the viewport, sure, but that’s still in the DOM.
Comment posted by GasTheo
Yes, sorry, I meant viewport