Issue
I would like to keep the navbar brand hidden at first when the page loads and only make it appear after scrolling down a certain height.
Have tried below code.
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
document.getElementsByClassName('#logo')[0].style.display = 'hidden';
} else {
document.getElementsByClassName('#logo')[0].style.display = 'visible';
}
});
Please help.
Solution
You use getElementsByClassName
, and give it an ID
Everything starting with #
(hash) is an ID, Everything starting with an .
(dot) is a class name. Also, getElementById
does not return an array, so you don't need to pick the first element (with [0]
).
Try something like:
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
document.getElementById('logo').style.display = 'hidden';
} else {
document.getElementById('logo').style.display = 'visible';
}
});
Though, as you are using jQuery, you could also clean it up more and use something like:
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
$('#logo').style.display = 'hidden';
} else {
$('#logo').style.display = 'visible';
}
});
or as Reza suggested use:
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
$('#logo').hide();
} else {
$('#logo').show();
}
});
Answered By - Dennis van de Hoef
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.