Jquery slide in div keeps moving on scroll - javascript

I have aa div that I want to slide in once the user scrolls down a specified amount. It initially works but after than the div keeps moving to the left a little on every scroll action instead of staying in place. Anyone has an idea why is this happening?
var opening = false;
var closing = false;
$(window).scroll(function(){
var windowHeight = $(window).height();
var windowScroll = $(window).scrollTop();
var position1 = $("#Support").offset().top;
if ( windowScroll > (position1 - (windowHeight/2)) )
{
if (!opening) {
opening = true;
closing = false;
$("#SupportImage1").stop().animate({
left: "1200px"
}, 1500, function(){
opening = false;
});
}
}
else
{
if (!closing) {
closing = true;
opening = false;
$("#SupportImage1").stop().animate({
left: "100%"
}, 1400, function() {
closing = false;
});
}
}
});

the scroll bar is most likely affecting your width calculations.
everytime you run that function against the scroll bar you are adding in the total screen width plus the offset by the scroll bar.

Related

Scroll automatic javascript

I have this code:
function scroll() {
shouldScroll = chat.clientHeight === chat.scrollHeight;
if (!shouldScroll) {
scrollToBottom();
}
}
function scrollToBottom() {
chat.scrollTop = chat.scrollHeight;
}
scrollToBottom();
setInterval(scroll, 100);
In this code I have an automatically scroll but, When I want to see the whole conversation, he does not let me go up so I can read the conversations. It just keeps me down.
How can i fix this?
Thanks
Check if user has scrolled to another position using scrollTop or is near to the bottom by comparing to an offset:
var offset = 50; // if user is 50px far from bottom
var shouldScroll = false;
if (chat.scrollHeight - chat.scrollTop) < offset){
shouldScroll = true;
}

Using the HTML5 attribute draggable="true" allow the page to scroll

I'm using the HTML5 attribute draggable="true" on some of my div's on my webpage. I want it so that when you drag one of these items to the bottom of the page, it scrolls the page down and when you drag it to the top, it scrolls the page up.
On Chrome, it automatically lets me scroll down when I drag to the bottom, but not up. On Firefox, it doesn't automatically let me scroll in either direction. Any help?
Please refer the below code :
var stop = true;
$(".draggable").on("drag", function (e) {
stop = true;
if (e.originalEvent.clientY < 150) {
stop = false;
scroll(-1)
}
if (e.originalEvent.clientY > ($(window).height() - 150)) {
stop = false;
scroll(1)
}
});
$(".draggable").on("dragend", function (e) {
stop = true;
});
var scroll = function (step) {
var scrollY = $(window).scrollTop();
$(window).scrollTop(scrollY + step);
if (!stop) {
setTimeout(function () { scroll(step) }, 20);
}
}

scroll to next div already in browser

I have a series of divs that are 100% height with a scroll to function that takes you to the next div out of the viewport on background click. However, if the next div is already slightly in the viewport the whole thing is counted as being visible and the scroll to bypasses it. Can anyone offer direction on how to get the script to scroll to the div even if it's partially in the viewport already?
Codepen here.
If you begin scrolling slightly in the codepen and then click on the background you'll see that it doesnt scroll you to the div that's already in the viewport but the div after that.
$(document).ready(function() {
// get initial nav height
var $window = $(window);
var wst = $window.scrollTop();
var th = $('div.top').height();
var currentSlide = $('#wrapper').data( 'current-slide', $('div.slide').eq(0) );
$('div.scroll_images').css({ height: 'auto', overflow: 'visible', top: 0 });
$('div.scroll_images div.inner').css({ position: 'absolute', top: 0 });
$('div.slide').each(function() {
$(this).css('padding',function() {
return (($(window).height()-$(this).height())/2)+'px 0'
});
});
// scrollto for click on slide
jQuery.fn.scrollTo = function(hash) {
$this = $(this);
st = $this.offset().top - th; // subtract nav height
$('html, body').animate({ scrollTop: st }, 550
);
}
$('#wrapper').click(function(e){
//get the current slide index from the body tag.
$this = currentSlide.data( 'current-slide' );
$next = $(".slide:below-the-fold");
if($next.length) {
$next.scrollTo($next.attr('id'));
//Save the next slide as the current.
$('#wrapper').data( 'current-slide', $next );
} else {
//Throw us back to the top.
$('div.slide:first').scrollTo($('div.slide:first').attr('id'));
//Save the first slide as the first slide, which
//Cycles us back to the top.
$('#wrapper').data( 'current-slide', $('div.slide:first'));
}
})
//Images fade in
$('img').hide();
$('img').each(function(i) {
if (this.complete) {
$(this).fadeIn();
} else {
$(this).load(function() {
$(this).fadeIn();
});
}
});
//Stop links affecting scroll function
$("a").click(function(e) {
e.stopPropagation();
});
});
(function($) {
$.belowthefold = function(element, settings) {
var fold = $(window).height() + $(window).scrollTop();
return fold <= $(element).offset().top - settings.threshold;
};
$.extend($.expr[':'], {
"below-the-fold": function(a, i, m) {
return $.belowthefold(a, {threshold : 0});
}
});
})(jQuery);
Here's what I might try to do: go through each div in the series. Find the div who's offset() is closest to $(window).scrollTop(). Now, find the next() div after the "current" one and scroll to it.
For comparing the offset() of each div, try something like this:
var closest = $('[selector]:first');
$('[selector]').each(function() {
var oldDistance = Math.abs(closest.offset() - $(window).scrollTop());
var newDistance = Math.abs($(this).offset() - $(window).scrollTop());
if(newDistance < oldDistance) {
closest = $(this);
}
}

Make .closest pick the padding to initiate script

I have it right now so that when you scroll down a fixed text will appear. However, the script running it is currently initiating when the viewport is scrolled to the <span>. How can I make it so that the script starts when you're, say 100px, above the <span>
I've tried using a <div> and positioning it where I want so that the script picks that up instead of the <span> however, that just adds unwanted blank space.
<div class="invis"></div>
.invis { height: 100px; visibility: hidden; }
Code: http://jsfiddle.net/suLLL/1/
$(window).scroll(checkY);
function checkY() {
//save this value so we dont have to call the function everytime
var top = $(window).scrollTop();
$(".title").each(function () {
var target = $(this).closest(".content");
var tTop = target.offset().top;
var tBottom = target.offset().top + target.outerHeight();
if (top >= tTop && top <= tBottom) {
console.log("Show");
$(this).show();
} else {
console.log("Hide");
$(this).hide();
}
});
}
checkY();
You could remove the height from the 'tTop' variable:
var someVal = 100;
var tTop = target.offset().top - someVal;

Reverse fixed menu animation

The menu is currently set up so that when you open a page it is visible at the bottom of the page. As you scroll up the black menu panel will disappear out of view then reappear with the logo from the top.
Is there a way to reverse it so that once you scroll back up the black menu will disappear and reappear at the bottom of the page?
see website by clicking here
var distance = $('#content-div').offset().top,
$window = $(window);
var didscroll=true;
$window.scroll(function() {
if(didscroll==true){
if ( $window.scrollTop() >= distance ) {
didscroll = false;
//alert("r");
// Your div has reached the top
jQuery('.header').css({"position":"fixed","top":'-100px',"left":0});
jQuery('a.logo').css("visibility","visible");
jQuery( ".header" ).slideDown( 5000, function() {
jQuery(this).css({"top":0});
});
}
}
});
});
Remove the inline styles when you reached the breakpoint. Like this
if ( $window.scrollTop() >= distance ) {
$(".header").attr({style : ""});
$("a.logo").attr({style : ""});
}
Try this one..
var oritop = -100;
$(window).scroll(function() { //on scroll,
var scrollt = window.scrollY; //get the amount of scrolling
var elm = $(".box"); //get the box we want to make sticky
if(oritop < 0) {
oritop= elm.offset().top; //cache the original top offset
}
if(scrollt >= oritop) { //if you scrolled past it,
//make it sticky or else
}
else { //otherwise
//Do what you want to
}
});

Categories