So i have this code on my page
jQuery
$(window).scroll(function(){
if ($(this).scrollTop() > 785) {
$('#navbar').addClass('fixed');
} else {
$('#navbar').removeClass('fixed');
}
});
css
.fixed {position:fixed; top:0; left:0;}
My problem
When i load the page #navbar seems to have .addClass('fixed'); before scrolling. If i scroll just 1px after loading the page then .removeClass('fixed') activates and is activated until i dont get below 785px.
How do i fix so fixed doesnt activate when i load the page?
Why not just remove it on load?
$(function() { $('#navbar').removeClass('fixed'); }); // this should remove it on load
$(window).scroll(function() {
if ($(this).scrollTop() > 785) {
$('#navbar').addClass('fixed');
} else {
$('#navbar').removeClass('fixed');
}
});
try 'resetting' the state once DOM loads, as follows:
function _setClass() {
if ($(window).scrollTop() > 785) {
$('#navbar').addClass('fixed');
} else {
$('#navbar').removeClass('fixed');
}
}
_setClass();
$(window).scroll(function(){
_setClass();
});
$(function(){ _setClass() });
hope that helped.
Related
I've added jQuery function that shows and hides navbar when scrolled. I also want to hide a div when the button 'start' is clicked. After i add new function none of them works longer. I have tried to add it to various places, but I still get no result at all. So how do I add multiple functions and make them to work?
Heres my code:
<script>
// function that hides text on click
(function($) {
$('#start').click(function() {
$('.lead').hide());
});
});
// my original function that stopped working after i added new one
(function($) {
$(document).ready(function() {
$(".masthead").css("background-color", "inherit");
// fade in .navbar
$(function() {
$(window).scroll(function() {
// set distance user needs to scroll before we fadeIn navbar
if($(this).scrollTop() > 600) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "black");
} else if($(this).scrollTop() === 0) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "inherit");
} else {
$('.masthead').fadeOut();
}
});
});
});
}(jQuery));
</script>
I think the problem is in the closing tag of the function you're adding.
Try like this:
(function ($){
$('#start').click(function(){
$('.lead').hide();
});
}(jQuery));
// my original function that stopped working after i added new one
(function ($) {
$(document).ready(function(){
$(".masthead").css("background-color","inherit");
// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 600) {
$('.masthead').fadeIn();
$(".masthead").css("background-color","black");
} else if($(this).scrollTop() === 0){
$('.masthead').fadeIn();
$(".masthead").css("background-color","inherit");
} else {
$('.masthead').fadeOut();
}
});
});
});
}(jQuery));
At least, closing bracket is wrong here. $('.lead').hide());
Tip: always check developer console first. Have fun coding.
Edit : Note that you have an extra closing bracket in the first function $('.lead').hide());.
You can use the following. Both functions can be combined in to a single block. And you can use $(document).ready() directly. If there is a problem with name conflict for $ use jQuery.noConflict();
<script>
$(document).ready(function() {
$(".masthead").css("background-color", "inherit");
// fade in .navbar
$('#start').click(function() {
$('.lead').hide();
});
$(window).scroll(function() {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 600) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "black");
} else if ($(this).scrollTop() === 0) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "inherit");
} else {
$('.masthead').fadeOut();
}
});
});
</script>
I am trying to achieve a scroll fadeIn within a specific section in this case section with the id is test.
The fadeIn works fine without the if statement, but I would think I need to have it to identify the section. What I am also struggling to do is have the same class fadeOut when the mouse scrolls back up.
I am fairly new at Jquery and would appreciate the assistance.
css
.third_third { display:none; width: 100%; height: 150px; margin-bottom: 3%; }
jquery
$(document).ready(function() {
if ($('section#test:visible')) {
$(document).scroll(function() {
$('.third_third').css("display", "inline-block").fadeIn(2000);
});
});
});
Make the div appear after a certain amount of pixels scrolling down. The fadeIn transition is done using CSS.
This would be your jQuery code:
var $document = $(document),
$element = $('.fixed-menu'),
className = 'hasScrolled';
$document.scroll(function() {
if ($document.scrollTop() >= 100) {
$element.addClass(className);
} else {
$element.removeClass(className);
}
});
Here i set up a jsFiddle as example
Please indent your code! makes it much easier to read.. Maybe try something like this: http://jsfiddle.net/j5q0tu86/4/
$(document).ready(function () {
$('.wrapper').bind('mousewheel', function (e) {
if (e.originalEvent.wheelDelta < 0) {
$('.third_third').stop(true, true).fadeIn(300);
console.log('Scrolling Down');
} else {
$('.third_third').stop(true, true).fadeOut(300);
console.log('Scrolling Up');
}
});
});
To identify your element, use this :
$(document).ready(function() {
$(document).scroll(function() {
$('section#test.third_third').css("display", "inline-block").fadeIn(2000);
});
});
I want to get an alert when, while scrolling, my footer comes to view.
$(window).on("mousewheel", function(){
if ($(window).scrollTop() + $(window).height() > $('#footer').position().top){
alert("footer visible");
}
else{
alert("footer invisible");
}
});
http://jsfiddle.net/JRUnr/10/
All conditions with height seem right, but not during scrolling.
Working DEMO
Try this
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > $('.footer').offset().top) {
alert("footer visible");
} else {
alert("footer invisible");
}
});
Hope this helps,Thank you
There is a jquery plugin for this task named jQuery Waypoints
(http://imakewebthings.com/jquery-waypoints/)
$('#footer').waypoint(function(direction) {
alert('Top of thing hit top of viewport.');
});
here is a working fiddle...
http://jsfiddle.net/kasperfish/JRUnr/14/
it is hacked together but it works
flag=true;
$(window).scroll(function() {
st=$(window).scrollTop();
$('#topscroll').html(st)
if(st>1450){
if(flag)
alert('test');flag=false;
}
});
I have a floating menu that i want to fade in when you start to scroll down the page, then fade out when you are back at the top of the page. I have got it working without the fade, but im not sure how to add the fades. Any help appreciated. Thanks.
$(document).scroll(function() {
$('#floatingnav').toggle($(this).scrollTop()>250)
});
css
#floatingnav {
position:fixed;
display:none;
}
You can use fadeToggle with some duration as an argument(just incase you want) instead of plane toggle.That will do your job.
$(document).scroll(function() {
$('#floatingnav').fadeToggle($(this).scrollTop()>250)
});
You can try this to test if div has reached top
$(window).scroll(function () {
var d = $('div'); // this is your fixed div
if (d.offset().top > 250) {
d.fadeIn();
} else {
d.stop().fadeOut();
}
});
TEST FIDDLE
$(window).bind("scroll", function() {
if ($(this).scrollTop() > 250) {
$("#floatingnav").fadeIn();
} else {
$("#floatingnav").stop().fadeOut();
}
});
Using this script:
<script>
$(function() {
$(window).scroll(function(){
$('#Your element id').slideUp('slow');
});
});
</script>
Is it possible only to perform the action after the user has scrolled 100px or more?
You do need scrollTop as said. It would be wise to include an 'else' function as well, so that when you scroll back to the top the toggled element gets hidden again. As such:
$(document).ready(function() {
$('#scrollDiv').hide();
$(window).scroll(function() {
if ($(document).scrollTop() > 100) {
$('#scrollDiv').fadeIn('slow');
}
else {
$('#scrollDiv').fadeOut('slow');
}
});
});
Here is a quick jsfiddle
You can use .scrollTop() to get how far the page has been scrolled
<script>
$(function() {
$(window).scroll(function(){
if($(this).scrollTop() > 100) {
$('#Your element id').slideUp('slow');
}
});
});
</script>