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>
Related
I have this short jQuery code to make the picture disappear when the window is resized. For some reason, after it disappears, it doesn't appear again.
Here is the code:
$(document).ready(function(){
$(window).resize(function(){
if($(window).width() < 700) {
$("#side-pic").css("display","none");
} else if($(window).width() >= 700){
$("#side-pic").css("display","show");
}
});
});
Also if by any chance you know if there is a way to make picture move under a certain div in my code, I'll be glad to hear it! Thank you guys in advance!
There is no display property such as display: show. Try using $("#side-pic").css("display","block"); instead.
Another Alternative would be hide/show:
$(document).ready(function(){
$(window).resize(function(){
if($(window).width() < 700) {
$("#side-pic").hide();
}
else if($(window).width() >= 700) {
$("#side-pic").show();
}
});
});
That's because the "show" is not a valid display value. https://developer.mozilla.org/en-US/docs/Web/CSS/display
Also, why the else if, isn't an else good enough?
Or rather a reusable CSS class and jQuery's toggleClass() Method:
jQuery( $ => {
$(window).on('resize', function() {
$("#side-pic").toggleClass("is-hidden", $(this).width() < 700);
});
});
.is-hidden {display: none;}
<div id="side-pic">SIDE PIC</div>
<script src="//code.jquery.com/jquery-3.1.0.js"></script>
You can also write a code Like following
$(document).ready(function(){
$(window).resize(function(){
if($(window).width() < 700) {
$("#side-pic").hide();
} else if($(window).width() >= 700){
$("#side-pic").show();
}
});
});
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've created a fiddle to show what is happening.
I am using jquery to fade in a link to the top of the page when the user is scrolling down.
I can get it to work on jsfiddle if I place the code in the javascript window, but if I put it in script tags where my $( window ).load(function() is in the HTML window, it doesn't work at all. Does anybody know why?
$('#slide').bind("scroll", function() {
if ($(this).scrollTop() > 20) {
$("#top").fadeIn();
} else {
$("#top").stop().fadeOut();
}
});
$('#top').on("click",function(){
$('#slide').animate({scrollTop:0}, 'slow');
});
here's the fiddle:
https://jsfiddle.net/8130fdhm/2/
Any help would be most appreciated.
Put in a script tag just before the body end tag. I have updated the jsfiddle here https://jsfiddle.net/8130fdhm/3/
....
<script>
$('#slide').bind("scroll", function() {
if ($(this).scrollTop() > 20) {
$("#top").fadeIn();
} else {
$("#top").stop().fadeOut();
}
});
$('#top').on("click",function(){
$('#slide').animate({scrollTop:0}, 'slow');
});
</script>
</body>
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();
}
});