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();
}
});
Related
I have this function:
$(document).ready(function() {
if ($(".splash").is(":visible")) {
$(".site").css({"opacity":"0"});
}
});
$(window).scroll(function(){
$(window).off("scroll");
$(".splash").slideUp("800", function() {
$("html, body").animate({"scrollTop":"0px"},100);
$(".site").delay(100).animate({"opacity":"1.0"},800);
});
})
I use this to pass from splash page to home in animation way. But when I'm in home page the scroll is still off and I need it to make a change in hte header. I use this code:
$(document).ready(function( $ ) {
$(window).scroll(function() {
var sT = $(this).scrollTop();
if (sT >= 200) {
$('header').addClass('scroll-header')
} else {
$('header').removeClass('scroll-header')
}
});
});
This two parts fight together!! How can I put on scroll after splash page to go out? Thanks!
In the end i have try to not use scroll off, and change with a simple
.show_splash{position: fixed;}
In this way finely work!!!
I have this custom <select>.
Inside the .select_list I have an ul with height:300px; and overflow:hidden;
When I hover the buttons inside the .select_list the <ul> is scrolling up or down.
My problem is that when I hover for example the 'Scroll down' button, the ul.scrollTop() its still increasing even if the scrollTop its over the scrollHeight.
After that if I'm scrolling top I have to wait a couple of miliseconds to scroll up again.
Can someone explain or help to stop the scrolling when the ul is scrolled to maximum?
Here is the JSbin:
http://jsbin.com/wupavameze/edit?css,js,output
$up.on('mouseover', function() {
doScroll(-offset);
})
.on('mouseout', function() {
stopScroll();
});
$down.on('mouseover', function() {
doScroll(offset);
})
.on('mouseout', function() {
stopScroll();
});
In doScroll function use the current value of scrollTop.
Below is the modified function.
function doScroll(v) {
interval = setInterval(function() {
$list.scrollTop($list.scrollTop() + v);
}, 30);
}
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'm trying to create an 'up' button, which will take user to the very top of the landing page. jsFiddle
I would like this button to be shown only on devices with large screens, so I'm using bootstrap3's hidden-xs class. This class applies display: none!important for small devices and display: block!important for large screens.
But now, I would like to make this button visible only, when scrolled down at least 50 pixels.
So, I would like to do something like:
$(document).ready(function() {
$(window).scroll(function() {
if($(window).scrollTop() < 50) {
// Near top.
$('#scrollUp:visible').slideUp();
}
else {
$('#scrollUp:hidden').slideDown();
}
});
});
jQuery's slideUp() and slideDown() apply display: none and display: block, but without !important.
This means that display: block!important applied by .hidden-xs is more important than css applied by slideDown() and slideUp().
It worked great until I started using .hidden-xs.
I tried $.animate({'display': 'none!important'}) instead of $.slideUp, but then I get another problem -- jQuery isn't properly selecting elements with :hidden. jsFiddle
Do you have an idea, what may I do wrong? Is there a way to do this nicely?
Thanks in advance!
Try
(function () {
var timer;
$(window).scroll(function () {
clearTimeout(timer)
timer = setTimeout(function () {
if ($(window).scrollTop() < 50) {
// Near top.
console.log('If elemnt is visible it should be hidden here');
$('#scrollUp:visible').stop(true, true).slideUp(function () {
$(this).removeClass('hidden-xs');
});
} else {
console.log('If element is hidden it should be displayed here');
$('#scrollUp:hidden').addClass('hidden-xs').stop(true, true).slideDown(function () {
$(this).css('display', '')
});
}
}, 100);
});
})()
Demo: Fiddle
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>