As I continued scrolling on my page, I encountered an issue with adjusting the top offset using jQuery on my element.
I want the element with id goToLog to become fixed on the page after scrolling 80px. This functionality is working correctly. However, when I scroll past 260px, my Navbar also becomes fixed at the top of the page, causing the button goToLog to be positioned under the Navbar. Therefore, I need to adjust the top from .2rem to 70px.
I have attempted adding !important after the top value in jQuery and changing the top value in css to px, but neither method seems to have any effect.
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 80) {
$('#goToLog').css('display', 'block');
$('#goToLog').on('click', function() {
window.scrollTo(0, 0);
});
} else if (scroll >= 260) {
$('#goToLog').css('top', '70px');
} else {
$('#goToLog').css('display', 'none');
}
if (scroll >= 260) {
$('#mainnav').addClass('stickynav');
} else {
$('#mainnav').removeClass('stickynav');
}
});
});#info {
height: 5rem;
background: #fff;
display: flex;
justify-content: space-between;
padding: 0 1rem;
position: relative;
}
#goToLog,
#logform input[type=submit] {
width: 150px;
height: 39px;
}
#goToLog {
display: none;
position: fixed;
z-index: 5;
}
nav {
width: 100%;
}
.stickynav {
position: fixed !important;
top: 0px;
background: #9C9FB3 !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="info" class="container">
<form id="logform" class="flex" method=POST action="">
<div><input type="submit" name="login" value="Login"></div>
</form><button id="goToLog" class="container" type="button">Login <span class="fas fa-arrow-circle-up"></span></button>
</div>
<header id="mainheader" class="parallax-header" data-parallax="scroll">
<div style="height:150px"></div>
<nav id="mainnav" class="">
<ul class="unlist container">
<li>nav item</li>
<li>nav item</li>
</ul>
</nav>
</header>If setting the display to block works in jQuery, why doesn't setting top to 70px work as expected?