Hi I am fairly new to javascript and I am simply trying to fade in the navbar after it reaches a specific element/class instead of using the distance from the top of the window.
// Navigation bar - show on scroll
$(document).ready(function(){
// hide .navbar first
$(".navbar").hide();
// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 200) {
$('.navbar').fadeIn();
} else {
$('.navbar').fadeOut();
}
});
});
});
You can use .offset() to get an elements position relative to the document.
so (outside of your window.scroll function do something like.
var offset = $('.myTriggerClass').offset().top;
then change your condition to
if ($(this).scrollTop() > offset)
so you would end up with
$(".navbar").hide();
// set distance user needs to scroll before we fadeIn navbar
var offset = $('.myTriggerClass').offset().top;
// fade in .navbar
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > offset) {
$('.navbar').fadeIn();
} else {
$('.navbar').fadeOut();
}
});
});
Related
I am making a one-page website.
Basically, I have this animated landing page with a landing image and a bootstrap jumbotron. I want to be able to implement a function where once the user scrolls past the end of the jumbotron, the user cannot scroll back up to view the landing image and the jumbotron. In a sense, either hide or delete the <div>s that were at the top, or completely disable scrolling back to those points.
I found this code, but it automatically disables scrolling up to the page top (after 200 px) on page load:
$(function() {
var scrollPoint = 200;
$(window).scroll(function() {
$(window).scrollTop() < scrollPoint ?
$(window).scrollTop(scrollPoint) : '';
}).scroll();
});
Any ideas?
You can use this code to hide the jumbotron.
$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('#id_of_jumbotron').offset().top +
$('#id_of_jumbotron').outerHeight() - window.innerHeight) {
hideTheJumboTron();
}
});
try this:
$(function () {
var scrollPoint = 200;
$(window).scroll(function () {
if ($(window).scrollTop() < scrollPoint) {
console.log($(window).scrollTop());
$(window).scrollTop(scrollPoint)
return false;
}
}).scroll();
});
I'm trying to add a 'fixed' class to a menu once the scroller hits that menu. I've managed to get it working, but having problems removing the class once the user scrolls back to the top.
Here is the site I'm working on: http://www.allbyor.com/
Here's is my JS code:
$(window).bind('scroll', function () {
var menu = $('.bottom-row');
if ($(window).scrollTop() >= menu.offset().top) {
menu.addClass('menufix');
} else {
menu.removeClass('menufix');
}
});
You need to register the original value of the menu.offset().top in a variable, because once you change its class to fixed the top value will be the same as the $(window).scrollTop().
JSFiddle demo.
var menu = $('.bottom-row');
var menu_top_value = menu.offset().top;
$(window).bind('scroll', function () {
if ($(window).scrollTop() >= menu_top_value) {
menu.addClass('menufix');
} else {
menu.removeClass('menufix');
}
});
I have this 'scroll to top button' that pops up after the user has scrolled down 300px. Everything works fine so far. What I'm trying to do now, is to make this button pop up at a specific element.
Here is the jQuery:
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
Ok, I then changed this line
if ($(this).scrollTop() > 100) {
to
if ($(this).scrollTop() > '.show-button-here') {
but it didn't work. Any ideas what I'm doing wrong?
Here is a fiddle: http://jsfiddle.net/v70L4buk/
You need to get the position of the element from the top of the page and then subtract how far from the top you want that element to get before showing the up arrow. In this case, I am showing the arrow when a link I created in the page gets to 300px from the top. Or you can remove the number and when that element gets to the top of the viewport the function will kick in.
if ($(this).scrollTop() > $('.show').offset().top - 300) {
JSFIDDLE: https://jsfiddle.net/gvpLe06c/1/
I want to add a sticky bar at bottom of my page and I want it to fade out once user reaches to a div by scrolling and again fade in once user scrolls up and that div is not on screen anymore.
And it shouldn't show if user screen is big enough to show that div normally.
Please guys help me...
I am currently using this code:-
<script type="text/javascript">
//<![CDATA[
$(window).bind("scroll", function() {
if ($(this).scrollTop() > -1) { //Fade in at a level of height
$("#bottbar").fadeIn();
checkOffset();
} else {
$("#bottbar").stop().fadeOut();
}
});
function checkOffset() {
if($('#bottbar').offset().top + $('#bottbar').height() >= $('#stopDiv').offset().top) {
$('#bottbar').css('position', 'absolute');
}
if($(window).scrollTop() + $(window).height() < $('#stopDiv').offset().top) {
$('#bottbar').css('position', 'fixed'); // restore when you scroll up
}
}
//]]>
</script>
but it is not working as expected on my site bookaire.com
I am not sure whats the problem is with this code, it doesn't show the bar when site loads, it show only when user scrolls a little and when it reaches the stopdiv instead of hiding the bar it get stuck at center of screen.
Whew! that took me a while since I'm still a beginner with javascript but I think I got it.
Note: the bar is getting stuck in the middle on certain screen size because you are only changing the position from fixed to absolute in your javascript. instead, change the display from block to hidden.Also note that the css for #bottbar should already be display:block
I believe your requirements are:
1. it shouldn't show if user screen is big enough to show that div normally
2. to fade out once user reaches to a div by scrolling
See: JSFIDDLE
$(document).ready(function() {
if($(window).height() > $('#stopDiv').offset().top) {
$("#bottbar").css('display', 'none');
}
else {
$("#bottbar").css('display', 'block');
}
});
$(window).bind("scroll", function() {
if($(window).height() > $('#stopDiv').offset().top) {
$("#bottbar").css('display', 'none');
}
if ($(this).scrollTop() > -1) { //Fade in at a level of height
$("#bottbar").css('display', 'block');
checkOffset();
}
else {
$("#bottbar").css('display', 'none');
}
});
function checkOffset() {
if($('#bottbar').offset().top + $('#bottbar').height() >= $('#stopDiv').offset().top) {
$('#bottbar').css('display', 'none');
}
if($(window).scrollTop() + $(window).height() < $('#stopDiv').offset().top) {
$('#bottbar').css('display', 'block'); // restore when you scroll up
}
}
// JavaScript Document
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
This should hide the box until you have scrolled to about 100px from the top. It does work in every browser until the latest Firefox update came out. Any suggestions why that is?
Check the box on the lower left corner on this site: http://lightningsoul.com
Problem had nothing to do with FF29 but with the implementation of the JavaScript.
I had to add a leading / in order to implement it for pages like http://lightningsoul.com/media/vid/1934 etc.