I tried to implement a div on my website, that sticks to the top of the browser as soon as it scrolls out of the viewport. I found a script that does this pretty good and it works well on the desktop. When I test it on the iphone I have a short lag where the div scrolls out for about a half second and pop then up at the desired location. Has anybody a clue how I could tweak that script?
Here is the link: jsFiddle
Thanks for your help!
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
$('#sticky-anchor').height($('#sticky').outerHeight());
} else {
$('#sticky').removeClass('stick');
$('#sticky-anchor').height(0);
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
Maybe you can use setTimeout and clear the interval when the scroll is invoked multiple times. This might help by limiting the number of times the callback is invoked.
$(function() {
var timer;
$(window).scroll(function() {
clearInterval(timer);
timer = setTimeout(function() {
sticky_relocate();
}, 50);
});
sticky_relocate();
});
Related
I have a problem regarding two animations, one scrolling down and one scrolling up (when the user has scrolled back up completely).
The animations block each other - with the following source code:
jQuery(document).ready(function($) {
$(window).on("load",function() {
$(window).scroll(function(){
if($(window).offset().top == 0){
$("selector").animate({}, 500);
$("selector").animate({}, 500);
} else {
$("selector").animate({}, 500);
$("selector").animate({}, 500);
}
});
}).scroll();
});
So it happens that after the true statement block of the if directly the else part is executed again and therefore the animation is partly not executed at all or both are executed one after the other. Does anyone have an idea that the animations are executed reliably:
else animation once as soon as scrolling down was done
if-Animation as soon as scrolling up completely again
Thanks in advance!
Makes no sense to cauculate $(window).offset().top since... it does what it says. 0.
Perhaps, on "scroll" Event you want to get the $(window).scrollTop()
jQuery($ => {
const $win = $(window);
const $items = $(".item");
$win.on("scroll", () => {
$items.toggleClass("active", $win.scrollTop() == 0);
});
$win.on("load", () => {
$win.trigger("scroll");
});
});
.active {
/* your styles here */
}
I am working on auto scrolling of chat application, which is like that whenever I go for a conversation to someone then the conversation page automatically scroll down and when I send a message the scroller automatically again scroll down on each send-receive message.
Using this script I achieve my goal
$(document).ready(function() {
setInterval(function() {
$('#messagepost').load('conveyrefresh.php?value=<?php echo $mid."&picture=".$profilepic; ?>').scrollTop($("#messagepost").prop('scrollHeight'))
}, 1000);
});
But problem is that when I scroll up it is not scrolling up normally, means it is not fixing on its upper position it goes to down automatically.
I want it to work normally when I scroll up or down beside auto-scrolling on each send message and on refreshing a page.
After searching its solution, I have implemented this script (in place of above)-
var scrollpos = $("#messagepost").scrollTop();
var scrollpos = parseInt(scrollpos) + 520;
var scrollHeight = $("#messagepost").prop('scrollHeight');
if(scrollpos < scrollHeight)
{
$(document).ready(function() {
setInterval(function () {
$('#messagepost').load('conveyrefresh.php?value=<?php echo $mid."&picture=".$profilepic; ?>')
}, 1000);
});
}
else
{
$(document).ready(function() {
setInterval(function () {
$('#messagepost').load('conveyrefresh.php?value=<?php echo $mid."&picture=".$profilepic; ?>').scrollTop($("#messagepost").prop('scrollHeight'))
}, 1000);});
}
But after applying it, the functionality of auto scrolling has gone.
After spending a lot of time, I got a solution and it is working for me.
<script type="text/javascript">
$("#messagepost").scrollTop($("#messagepost").prop('scrollHeight'));
$(document).ready(function()
{
function updateChat(){
$('#messagepost').load('conveyrefresh.php?value=<?php echo $mid."&picture=".$profilepic; ?>');
}
var chat = $("#messagepost").html();
setInterval(function () {
updateChat();
if(chat !== $("#messagepost").html()){
$("#messagepost").scrollTop($("#messagepost").prop("scrollHeight"));
chat = $("#messagepost").html();
}
}, 1000);});
</script>
I'm hoping a Javascript wiz can help a fellow citizen out with resolving a problem. I've a fairly straight forward function. When I scroll down by 1px I would like to apply a bounceDown class, this will run for 5 seconds and the class will then disappear for future running of the same function.
When I scroll up from that current scroll position I would like the bounceUp effect to apply. However the issue is I think the bounceUp effect only works once you scroll past the original scroll but in addition to this if the previous function is still running on it's 5 second transition then it gets jumpy as it's trying to run two classes at the same time so there almost needs to be a delay applied.
Does anyone think they can help, I'd gratefully appreciate it.
<script>
(function($){
$.fn.extend({
addTemporaryClass: function(className, duration) {
var elements = this;
setTimeout(function() {
elements.removeClass(className);
}, duration);
return this.each(function() {
$(this).addClass(className);
});
}
});
})(jQuery);
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 1) {
$(".spanner").addTemporaryClass("BounceDown", 5000);
}
else if (scroll <= 1) {
$(".spanner").addTemporaryClass("BounceUp", 5000);
}
});
</script>
What about a boolean variable that is 'true' when addTemporaryClass is running? So:
(function($){
var classAdded = false; //New
$.fn.extend({
addTemporaryClass: function(className, duration) {
classAdded = true; //New
var elements = this;
setTimeout(function() {
elements.removeClass(className);
classAdded = false; //New
}, duration);
return this.each(function() {
$(this).addClass(className);
});
}
});
})(jQuery);
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 1 /*New*/ && !classAdded /*New*/) {
$(".spanner").addTemporaryClass("BounceDown", 5000);
}
else if (scroll <= 1 /*New*/ && !classAdded /*New*/) {
$(".spanner").addTemporaryClass("BounceUp", 5000);
}
});
So I have a piece of jquery that will stick a div to the top of the page once scrolled past, this works well !!
now im trying to set it so one the bottom on that div is reached it stops sticking to the head, I can seem to work this.
any help is appreciated.
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
}
if ($(window).scrollTop() > 1400) {
$('sticky-anchor').slideDown();
}
else {
$('#sticky').removeClass('stick');
}
}
$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
Shouldn't
$('#sticky').removeClass('#stick');
be
$('#sticky').removeClass('stick');
??
I am writing a small jQuery function and I seem to be having trouble.
What I am trying to do here is when the user scrolls down the page by 90px, a div tag should animate down (from top:-50px to top:0), and vice-versa when they scroll back to the top of the page.
The problem I am having is that the animation seems to be very slow and unresponsive at times. I test in 3 different browsers and different computers but I am having no joy.
Here is my code:
// Show div
var scrollValue = "90";
// Animate functions
var showHead = function (){
$(".element").animate({top: "0"}, 250);
}
var hideHead = function (){
$(".element").animate({top: "-50px"}, 250);
}
$(window).scroll(function() {
if ($(this).scrollTop() > scrollValue) {
showHead();
} else {
hideHead();
}
});
The .element properties:
.element { positoin:fixed; top:-50px; }
Could anyone figure out why my code the hide/showHead functions are so sloppy?
Thanks,
Peter
The scroll event is triggered several times and even though it is rate-limited it keeps being a rather intensive operation. Actually, you may be queuing several animations and the fx stack may be growing very quickly.
One possibility you can try is stopping all previous animations before triggering a new one. You can do this by using .stop().
$(".element").stop().animate({top: "0"}, 250);
The .stop() function also provides some other options which you can use to tweak it even more.
Try this one :
$(window).scroll(function() {
if (window.scrollY > scrollValue) {
showHead();
} else {
hideHead();
}
});
scroll events occurred many time durring user scrolling.
You need to check if your animation is in progress before starting the animation again.
Try this :
// Show div
var scrollValue = "90";
var inProgress = false;
// Animate functions
var showHead = function () {
if(inProgress)
return false;
//Animate only if the animation is not in progress
inProgress = true;
$(".element").animate({
top: "0"
},250,function(){
inProgress = false; //Reset when animation is done
});
}
var hideHead = function () {
if(inProgress)
return false;
//Animate only if the animation is not in progress
inProgress = true;
$(".element").animate({
top: "-50px"
}, 250,function(){
inProgress = false; //Reset when animation is done
});
}
$(window).scroll(function () {
if ($(this).scrollTop() > scrollValue) {
showHead();
} else {
hideHead();
}
});
Assuming you have position:fixed (or some other sort of styling making the bar visible when necessary):
var scrollheight = 90;
var $el = $('.element');
function showHead(){
$el.stop().animate({
top: '0px'
}, 250);
}
function hideHead(){
$el.stop().animate({
top: '-50px'
}, 250);
}
$(window).scroll(function(){
if ($(window).scrollTop() > scrollheight){
showHead();
}else{
hideHead();
}
});
example: http://jsfiddle.net/L4LfL/
try using queue: false and as Alexander said use .stop()
here jsfiddle
http://jsfiddle.net/hwbPz/