I am trying to make a navigation bar which fades in when the user scrolls down. Right now I'm simply trying to get it to do anything when the user scrolls down, because I've tried to do a number of scripts, and it isn't working.
I'm referencing the script like this in my HTML document:
<body onload-src="nav.js">
And this is my script:
function nav() {
if (window.pageYOffset > 500) {
document.getElementById("scrollnav").style.visibility="invisible";
}
else {
document.getElementById("scrollnav").style.visibility="visible";
}
}
Any help is greatly appreciated! I know lots of people have asked questions like this, but I would really like to understand what I'm doing wrong here.
invisible is not a valid value for visibility.
What you probably want is hidden:
document.getElementById("scrollnav").style.visibility="hidden";
Here is a reference.
You should also make sure the element actually exists before accessing the style property. It may not seem important, but if you intend on using the code for the foreseeable future then you will most likely run into errors at some point.
function nav() {
var elem = document.getElementById("scrollnav");
if ( ! elem) {
console.warn("#scrollnav was not found on the page");
return;
}
if (window.pageYOffset > 500) {
elem.style.visibility="invisible";
} else {
elem.style.visibility="visible";
}
}
Related
I was following this tutorial, trying to get my sites navigation bar to stick to the top of the page when it reaches the top of the page. I couldn't get it to work with the way they had it set up, so I tried to set it up in a different way and still can't get it to work. I put this code at the end of my body tag to try and make this work (the navigation bar has a css id of "navbar"):
jQuery
if ($document).scrolltop() > 132){
$("#navbar").css("position", "fixed");
$("#navbar").css("top", "132px");
}
else{
$("navbar").css("position","static");
}
Is there something I am missing?
Thanks in advance,
Bradon
Edit:
I want to thank everyone for the quick replies, and apologize as I am both new to javascript and stackoverflow. I have tried to implement some of the solutions suggested and here is what I have now:
<script type="text/javascript">
var navbar = $("#navbar");
navbar.on("scroll", function(e){
if (navbar.scrollTop() <= 0){
navbar.css("position", "fixed");
navbar.css("top", "0px");
}
else{
navbar.css("position","static");
}
});
</script>
I still can't get it to work properly.
Edit 2:
I would like to thank everybody for their help, I couldn't have figured it out without you guys. Here is the code I used if anybody should ever need it:
<script type="text/javascript">
var navbar = jQuery("#navbar");
jQuery(document).on("scroll", function(e){
if (jQuery(document).scrollTop() > 280){
navbar.css("position", "fixed");
navbar.css("top", "0px");
}
else{
navbar.css("position","static");
navbar.css("top", "auto");
}
});
</script>
this script assumes the thing you want stuck to the top has a class of "navbar". My problem was that wordpress wasn't accepting $ in jquery so I replaced it with jQuery. Thank-you once again everybody!
There is a bigger issue in that your scrolltop check is happening only once, while the page is loading. In the original tutorial, the code that checks the scrolltop is set to execute everytime a scroll event occurs:
wrap = $('#wrap');
wrap.on("scroll", function(e) {
if (this.scrollTop > 147) {
wrap.addClass("fix-search");
} else {
wrap.removeClass("fix-search");
}
});
The "wrap.on('scroll')" part is very critical because this will cause the "scrolltop" value check to be triggered whenever the div is scrolled.
I believe the syntax is wrong. Missing parenthesis on document.scrollTop and also missing the # sign on navbar.
<script type="text/javascript">
if ( $(document).scrollTop() > 132){
$("#navbar").css("position", "fixed");
$("#navbar").css("top", "132px");
}
else{
$("#navbar").css("position","static");
}
</script>
I hope i got a simple question for you here. I went through google and stackoverflow search section, but hadnt quite the luck with solution ideas on my problem.
My problem is following, i need a banner to change second class if the width of the picture should dropt below the width size of the document. Generally i would use media queries but since it alawys depends just on the size of the picture i dont know how else i can get this to work then with js or jquery.
I don't rly know why it dosn't work. I executed all the errors i got on the console of Chrome and everyone that appeared on my editor... I generally use only html and css and can edit already existing js and jqueries. But this here is one of few codes i wrote on my own and i am kinda stuck...
$(document).ready(function(){
$('.single-featured').resize(function(){
if ($('.single-featured').width() < $(document).width()) {
$('.single-featured').removeClass('thumb-vh');
$('.single-featured').addClass('thumb-auto');
}
else {
$('.single-featured').removeClass('thumb-auto');
$('.single-featured').addClass('thumb-vh');
}
});
});
I appreciate any kind of solutions or explenations on that matter.
A couple of things:
resize doesn't fire on individual elements, it fires on window, so $(window).resize(...), not $('.single-featured').resize(...).
To get the width of the window, you want $(window).width(), not $(document).width().
Side note: It's not a good idea to constantly re-query the DOM. Do the query only when the results may have changed, and then remember the result:
$(document).ready(function() {
$(window).resize(function() {
// ^^^^^^
var featured = $('.single-featured');
// ^^^^^^^^^^^^
if (featured.width() < $(window).width()) {
// ^^^^^^
featured.removeClass('thumb-vh');
featured.addClass('thumb-auto');
} else {
featured.removeClass('thumb-auto');
featured.addClass('thumb-vh');
}
});
});
I needed a jQuery function to fix my div when the page is scrolled.
I found this:
var fixed = false;
var topTrigger = $('#sticker').offset().top;
$(document).scroll(function() {
if( $(this).scrollTop() >= topTrigger ) {
if( !fixed ) {
fixed = true;
$('#sticker').css({'position':'fixed', 'top':'0'});
}
} else {
if( fixed ) {
fixed = false;
$('#sticker').css({'position':'relative'});
}
}
});
Now, since I'm not a super beginner with jQuery, I tried to skim it and understand it. The only things I don't understand are the things related to the var:fixed. I tried to delete the var and the if statement related to that and the function works perfectly.
My question : why is that variable there, what does it mean, what feature does it add to the entire function?
Why should I keep it there instead of deleting everything related to that variable?
The scroll event will be fired multiple times as the user scrolls. If you keep on changing the DOM attributes, then the performance of the site may slow down.
To avoid applying the style multiple times, they are having a flag called fixed. So once the user has scrolled a particular height, they will trigger change the DOM to be fixed. Later they need not again change the CSS style.
Only if the user scrolls back less than the threshold they need to change the style again.
So i'm wondering how you can make a div apear at a certain point of the page and stay in the exact same spot untill you reach a specific point of the page
kinda like they have on http://www.squarespace.com where you see a imac screen which stays on the screen until you reach a specific point
can this be done without using js
either way can someone let me know how?
I'm going to assume you mean making a div show up when the user has scrolled to a certain point in the page and then disappear when they scroll to another point.
This isn't technically possible with CSS. There might be a way to make it look like this with other elements covering it up, but I'll focus on doing it with JS for now.
Essentially, you want to
// set up limits for show/hide
var SHOW_Y = 100,
HIDE_Y = 800;
// function to be called every time
// the page is scrolled
function scrolled() {
if(window.scrollTop < SHOW_Y) {
hide(this);
} else if(window.scrollTop < HIDE_Y) {
show(this);
} else {
hide(this);
}
}
// helper function which hides an element
function hide(element) {
element.style.display = 'none';
}
// helper function which shows an element
function show(element) {
element.style.display = 'block';
}
window.addEventListener('load', function() {
var element = document.getElementById('your-element');
window.addEventListener('scroll', scrolled.bind(element));
});
I would probably do this using CSS classes rather than display properties, in order to control the way that the element disappears and reappears, but this should give you some idea.
You could also use a script like Skrollr or ScrollMagic.
I want to make a video appear when flipping to a certain page of this application: http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html Here is some of my amateur code:
$(document).ready(function(){
if (page === 2)
{
$("iframe").show();
}
else
{
$("iframe").hide();
}
});
It connects to an iframe tag that is absolutely positioned. Is that the right approach?
Thanks for your help :-)
Your code will only check the page once - when it's initially loaded.
You will want to put that if statement inside a click handler...
$('#elementYouClicked').live('click', function() {
if (page === 2) {
//show
} else {
//hide
}
});
If this is not what you are asking, can you elaborate on your question please?