I have the following JavaScript code.
var x = $('.sidebar').offset().top,
offsetY = $('.left-columns').offset().left + $('.left-columns').width();
$(window).scroll(function(){
var scroll = $(this).scrollTop();
if(scroll >= x){
$('.sidebar').addClass('active1');
$('.active1').css({left:offsetY});
}else{
$('.sidebar').removeClass('active1');
$('.active1').css({left:0});
}
});
$(window).resize(function(){
x = $('.sidebar').offset().top,
offsetY = $('.left-columns').offset().left + $('.left-columns').width();
});
It works fine, but when I resize the browser window, then the problems begin with the positioning element
I have no idea what you are trying to achieve but I'm guessing that you need to reposition the .sidebar1 and .active1 elements when the window resizes. By that I mean, on the resize handler, do exactly the same you are doing on the scroll handler...
$(window).scroll(updatePosition);
$(window).resize(updatePosition);
function updatePosition(){
x = $('.sidebar').offset().top,
offsetY = $('.left-columns').offset().left + $('.left-columns').width(),
scroll = $(this).scrollTop();
if(scroll >= x){
$('.sidebar').addClass('active1');
$('.active1').css({left:offsetY});
}else{
$('.sidebar').removeClass('active1');
$('.active1').css({left:0});
}
}
You need to put your conditions in both events, it has problems if you just put in .scroll event only because it doesn't respond in .resize() event, also if you make a separate function that will be reusable:
function scrlResize(){
x = $('.sidebar').offset().top,
offsetY = $('.left-columns').offset().left + $('.left-columns').width(),
scroll = $(this).scrollTop();
if(scroll >= x){
$('.sidebar').addClass('active1');
$('.active1').css({left:offsetY});
}else{
$('.sidebar').removeClass('active1');
$('.active1').css({left:0});
}
}
$(window).scroll(scrlResize);
$(window).resize(scrlResize);
Related
I am creating a continuous looping page of images. Looping in both directions from div #loop-end to #loop-start with jquery scroll and offset top.
https://codepen.io/akmalmo/pen/eYgoQKd
var element_position = $('#loop-start').offset().top;
$(document).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = element_position;
if(y_scroll_pos > scroll_pos_test + 2) {
var loopend = $('#loop-end').offset().top;
var loopstart = $('#loop-start').offset().top;
$(document).scroll(function() {
if ( $(document).scrollTop() >= loopend + 1 ) {
$(document).scrollTop($('#loop-start').offset().top)
}
else if ( $(document).scrollTop() <= loopstart - 1 ) {
$(document).scrollTop($('#loop-end').offset().top)
}
});
}
});
The problem is that this function breaks on window resize and I am wondering if there is a simple way to recalculate the offset value? Or preferably having it calculate the offset in a more responsive fashion?
You can use the jQuery resize event to recalculate the looping variables each time the window is resized.
$(window).resize(function() {
// your function
});
I have infinity scroll and each time the top scroll reach to certain part of the div, it loads a new content until its over. But each time it loads, it get very slow. It happens when I put some code inside of .each function, and that my scroll becomes really slow, which is annoying. I don't know how to fix it
function scrollAnimationFrame(ticking, windowHeight, tabSelected){
if (!ticking) {
window.requestAnimationFrame(function() {
scrollEvent(tabSelected, windowHeight);
ticking = false;
});
}
ticking = true;
}
function scrollEvent(tabSelected, windowHeight) {
var activeTab = document.getElementsByName(tabSelected)[0]
var divResults = activeTab.getElementsByClassName('div-content');
var scrollY = window.scrollY || document.documentElement.scrollTop;
var pos = $(window).scrollTop();
var scrollY = window.scrollY || document.documentElement.scrollTop;
$(divResults).each(function(i, el){
var posOutsideDiv = $(el).offset().top + $(el).outerHeight();
var inside = (scrollY >= $(el).offset().top && scrollY <= posOutsideDiv - 150)
if(inside){
toggleThead(el, "visible");
} else if(scrollY >= $(el).offset().top && scrollY <= posOutsideDiv + $(document).height()){
toggleThead(el, "hidden");
} else {
toggleThead(el, "visible");
}
});
}
Okay, I thought it was javascript that the scroll is getting slower each time appending a new content. So I checked at AngularJs and I was reusing the directive template. So basically create two directives for each template and voilá(Hated doing this). No more slow scroll.
I want to detect which div is nearest to the screen center, while scrolling horizontally. Once detected, I want to do something such as trigger an event.
var screenW = ($(window).width() /2);
$('div.fistSlider').bind('mousemove', function(e){
var xN = e.pageX + 16;
$('div#divContainer').scrollLeft(xN);
});
When the div nearest to red line (the center of screen), should do some event.
The answer here is to check for the offset of each div.
$(document).scroll(function(){
$('div').each(function(){
var centerLine = $(window).width()/2;
var divStart = $(this).offset().left;
var divEnd = divStart + $(this).width();
if(divStart < centerLine && divEnd > centerLine){
//do the thing
} else {
//undo the thing
};
});
});
I have a snippet that on scroll it checks wether an element is in the current viewport.
I now want to add multiple elements into the mix, but I wanted to avoid doing multiple if statements checking for each, I know the following code doesn't work but it is an example of how I would like to do it, is there a way of doing it this way?
var listOfPanels = $('#item2, #item2, #item3, #item4, #item5');
$(window).scroll(function(event) {
// if the element we're actually looking for exists
if (listOfPanels.length){
// check if the element is in the current view using the attached function
// and the event hasn't already fired
if (isElementInViewport(listOfPanels)) {
// do something
}
}
});
try this:
function isElementInViewport(el) {
var top = el.offsetTop;
var left = el.offsetLeft;
var width = el.offsetWidth;
var height = el.offsetHeight;
while(el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
}
return (
top < (window.pageYOffset + window.innerHeight) &&
left < (window.pageXOffset + window.innerWidth) &&
(top + height) > window.pageYOffset &&
(left + width) > window.pageXOffset
);
}
var listOfPanels = $('#item2, #item2, #item3, #item4, #item5');
$(window).scroll(function(event) {
if (listOfPanels.length){
listOfPanels.each(function(){
if (isElementInViewport($(this)[0])) {
console.log($(this).attr('id') + ' in viewport');
}
});
}
});
(isElementInViewport js method brought from: How to tell if a DOM element is visible in the current viewport?)
hope that helps.
Using jQuery, how do I determine the height/distance between the very top of the browser window to the bottom of a div, such as a header. I'm using the following code:
$(window).resize(function() {
$totalHeight = $(window).height();
$headerHeight = $('header').height();
$('#portfolio-info').css('height',($totalHeight - $headerHeight - 105) + 'px');
});
And I want to make sure that $headerHeight isn't always the same value, as you scroll away from the header it should decrease all the way down to zero.
Thanks!
This should work out for you.
$(window).resize(function() {
var top = $(this).scrollTop(),
bottomDiv = $('div').offset().top + $('div')[0].offsetHeight,
distance = Math.max(0, (top - bottomDiv) * -1);
});