I would like to trigger an event with jQuery when the scroll bar is not at the top of the document. So far I can only get this to work when it's at the top of the document. "!==" does not seem to work.
$(document).ready(function() {
if($(window).scrollTop() === 0) {
alert("top!")
};
});
Try this:
$(document).ready(function() {
$(window).scroll(function() { /* or whatever element you want to attach to */
if($(window).scrollTop() === 0) {
alert("top!")
};
});
});
Of course, this will trigger every time you scroll to the top, which may not be what you want.
You need to use the .scroll() event
$(document).ready(function() {
$(window).scroll(function() {
if($(window).scrollTop() !== 0) {
alert("not top!")
};
});
});
http://jsfiddle.net/EX2q2/
Related
I have this issue that I'm not being able to work correctly.
I have a navbar that must change on scroll(this part works fine) but it must also change when window/viewport is < 991px.
It actually does work, but I must scroll to apply the effect.
Here's my code:
$(document).ready(function()
{
var $navbar = $('.navbar');
// ----------
$(function()
{
$(window).scroll(function()
{
if(($(window).scrollTop() > 60 && $(window).on('load resize').width() > 992) || ($(window).on('load resize').width() < 992))
{
$navbar.addClass("compressed");
}
else
{
$navbar.removeClass("compressed");
}
});
});
});
If I shrink the broswer, nothing happens. At the first scroll, it works correctly. How should I trigger it when load or resize the window?
Thanks!
Just replace this:
$(window).scroll(function() {...});
with this:
$(window).on("load scroll resize", function() {...});
That will result in the function being called on any of the listed events.
I have two menus that fade in and out on scroll. But when I resize the window I want to stop this event. I've tried plenty of stuff, searched a lot but nothing worked. I'm missing something. Here's what I have:
var scrollHandler = $(window).scroll(function() {
var top = $(window).scrollTop();
if (top > 0) {
$('.menu').fadeOut('fast', function() {
$('.second-menu').fadeIn('fast');
});
} else {
$('.second-menu').fadeOut('fast', function() {
$('.menu').fadeIn('fast');
});
}
})
scrollHandler;
if ($(window).width() < 768) {
$(window).off("scroll", scrollHandler);
}
Any help would be great, thanks!
The $(window).width() is only evaluated at runtime (i.e. the width of the viewport when the script is executed). It is not reactive in the sense that it will be updated on-the-fly when the viewport is resized.
Therefore, if you want to listen to changes in the width, you will have to place the logic within the window resize event callback:
$(window).resize(function() {
if ($(window).width() < 768) {
$(window).off('scroll');
}
});
Moreover, there are several issues with your code.
The scrollHandler should reference/define the function, not the outcome of the binding
Calling scrollHandler does not do anything. If you make the changes as per #1, then you can simply bind the logic using $(window).on('scroll', scrollHandler);
The .off() method does not accept a second parameter, this is enough: $(window).off('scroll')
After refactoring, your code will look something like this:
var scrollHandler = function() {
var top = $(window).scrollTop();
if (top > 0) {
$('.menu').fadeOut('fast', function() {
$('.second-menu').fadeIn('fast');
});
} else {
$('.second-menu').fadeOut('fast', function() {
$('.menu').fadeIn('fast');
});
}
};
// Bind scrollHandler firing to scroll event
$(window).on('scroll', scrollHandler);
$(window).resize(function() {
if ($(window).width() < 768) {
$(window).off('scroll');
}
});
Note:
If you want to get the best performance out of this, you should throttle the resize event so that the callback function is not fired too frequently. Lodash/Underscore.js have utility functions for that (_.throttle()), and there is also a jQuery plugin available.
In Lodash/Underscore.js:
$(window).resize(_.throttle(function() {
if ($(window).width() < 768) {
$(window).off('scroll');
}
}, 100));
Using Ben Alman's jQuery plugin:
$(window).resize($.throttle(100, function() {
if ($(window).width() < 768) {
$(window).off('scroll');
}
}));
I have a scroll function. It needs to alert when you scroll to bottom. Strangely, it only alerts when you scroll to top. What is the correct way to make it work when you scroll at bottom.
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()){
alert();
});
});
You can use a flag to keep the current scroll or update it and then check the current position:
$(function () {
cur = $(window).scrollTop();
$(window).scroll(function() {
if ($(window).scrollTop() < cur) {
// Scrolled Up!
} // Remove the extra `);` here.
});
});
try this
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()){
alert();
} //Remove from here
});
Remove ) after the end of if block.
I have a jquery code that I've indicated below. These codes run, When I start scrolling (I mean when the height of scroll is more than 100)
But I want to run just for once, immediately after height of 100, and not to be run more than once.
$(window).scroll(function(){
if ($(window).scrollTop() > 100 ){
//some codes...
}
});
How can I do this? Thank you :)
As soon as your condition is met, unbind the scroll handler:
$(window).scroll(function(){
if ($(window).scrollTop() > 100 ){
//Kill the handler
$(window).off("scroll");
//some codes...
}
});
use
$(window).unbind('scroll');
When you enter first time
$(window).scroll(function(){
if ($(window).scrollTop() > 100 ){
$(window).unbind('scroll');
//some codes...
}
});
Bind the scroll event to $(window), then when scrollTop() > 100, execute your action then unbind the scroll event from $(window)
$(document).ready(function() {
$(window).bind('scroll', function() {
if ($(this).scrollTop() > 100) {
$('body').prepend('Scroll top > 100');
$(window).unbind('scroll');
}
});
});
body { min-height: 1000px }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
http://codepen.io/pen/
ok this can be done with the help of global variable or flag in order to see the effect first put lots of data into the page so that you can see vertical scroll.
<script>
var flag = 0;
$(document).ready(function() {
$(window).scroll(function() {
if (flag == 0) {
if ($(window).scrollTop() > 100) {
alert('1st time');
flag = 1;
}
} else if (flag == 1) {
alert('second time and u can comment this alert');
}
});
});
</script>
The .off() function will stop the function from firing after the first time.
$(document).ready(function () {
$(window).on('scroll.myEvent', function() {
if ($(document.body.scrollTop > 100))
{
$(window).off('scroll.myEvent');
alert('fired');
}
});
});
Example: http://jsfiddle.net/2k3s9jx8/
I want to hide a div once my slider passes a scrollTop() value of 200px. I've looked at this article and tried using it as a template for what I want. I have the following code, but its not hiding the element. Live site
function removeArrow() {
$(window).scroll(function() {
if($('.portfolio-sliders:first-child').scrollTop() > 100) { //use `this`, not `document`
$('.scrl-dwn').css({
'display': 'none'
});
}
});
}
UPDATE
I've updated by code:
function removeArrow() {
$(window).scroll(function() {
var slider = $('.portfolio-sliders:first-child').position.top;
if(slider >= 10) {
$('.scrl-dwn').hide();
}
});
}
which should work, but its not...
Position is a function, not a property. You need to call the function with ():
var slider = $('.portfolio-sliders:first-child').position().top;
Replace your whole removeArrow function with this code.
(If you open your live site, and run this in the console, you can see it's working).
The scroll event never fired, so I handled theese mousewheel events instead.
$(window).bind('DOMMouseScroll mousewheel', function() {
var div = $(".portfolio-sliders:first-child"),
top = div.position().top,
display = top < 400 ? 'none' : '';
$('.scrl-dwn').css({ 'display': display });
});
Use This :
$(window).scroll(function(){
if ($(window).scrollTop() > 660)
{
$(".Left-Section").css("position", "fixed");
$(".Center-Content").css("margin-top", "0");
$(".Right-Nav img").css("transform", "rotate(360deg)");
}
;)