I'm trying to implement a jQuery script that will slide in a header after scrolling on the page, but for some reason, it's not working. When I reach the 3rd line, my code editor displays a !read only alert, suggesting there may be a syntax issue?
Just so you know, I am using Beaver Builder, which automatically includes jQuery.
$( document ).ready(function() {
$(window).scroll(function(){
scroll = $(window).scrollTop();
if (scroll > 450){
$('#jQuery-mob').slideDown();
}
if (scroll < 450){
$('#jQuery-mob').slideUp();
}
});
});
$( document ).ready(function() {
$(window).scroll(function(){
scroll = $(window).scrollTop();
if (scroll > 700){
$('#why-jquery').slideDown();
}
if (scroll < 700){
$('#why-jquery').slideUp();
}
});
});
For both #jquery-mob and #why-jquery elements, their initial display is set to none.
CSS:
#why-jquery {
position: fixed;
top:0;
z-index: 99;
width: 100%;
height: 100px;
display: none;
}
#jQuery-mob {
position: fixed;
top:0;
z-index: 99;
width: 100%;
height: 100px;
padding: 0 !important;
display: none;
}