I have a javascript that enables autorotating tabs on my website. my tabs are in the bottom of the page and by the moment when you reach this section almost the last tab is opened so the portfolio sort of starts not from the first item.
is there a way to enable this script only when the section with tabs scrolls into view?
the code snippet is here:
<script>
var Webflow = Webflow || [];
Webflow.push(function() {
var tabTimeout;
clearTimeout(tabTimeout);
tabLoop();
// define loop - cycle through all tabs
function tabLoop() {
tabTimeout = setTimeout(function() {
var $next = $('.tabs-menu').children('.w--current:first').next();
if ($next.length) {
$next.removeAttr("href").click(); // click resets timeout, so no need for interval
} else {
$('.tab-link:first').removeAttr("href").click();
}
}, 15000);
}
// reset timeout if a tab is clicked
$('.tab-link').click(function() {
clearTimeout(tabTimeout);
tabLoop();
});
});
</script>
Detect how much the user has scrolled from top to determine when to run the function.With JavaScript:
var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop;With jQuery:
var scrollTop = $(window).scrollTop();
Compare scrollTop with the position of the parent element of your Tabs.Here is a method to get that, if you need to calculate it:
How can I get an object's absolute position on the page in Javascript?
This question already has answers here:
Detect when Body Scroll hits top | bottom of element
(2 answers)
Closed 6 years ago.
I have a big webpage, that has a lot of <div> elements. I want to detect when the scroll detects that element. The thing is that I have no id. I tried to do this:
$('#hexagon').scroll(function() {
alert("hi");
var currY = $(this).scrollTop();
var postHeight = $(this).height();
var scrollHeight = $('#path1').height();
// Current percentual position
var scrollPercent = (currY / (scrollHeight - postHeight)) * 100;
triangle.style.strokeDashoffset = scollPercent;
});
It doesn't display the alert box. What I am doing wrong?
Try to do this:
$(window).scroll(function() {
var hexagon = $('#hexagon').position().top;
if($(window).scrollTop() > hexagon) {
alert('scroll');
};
});
I currently have a nav bar within my header that I would like to become fixed after the user scrolls past a certain element. I would also like to achieve the same animation effect as seen at http://pixelmatters.com
When I say 'same' I mean using the same nav bar/header element that I'm using at the top, rather than using a duplicate somewhere else in my document.
I've tried to achieve he result with my own code shown below. I've also included a jsFiddle link of my current setup.
jQuery
var bottomElement = $('.dividerWrap').offset().top + $('.dividerWrap').height();
$(window).on('scoll', function() {
var stop = Math.round($(window).scrollTop());
if (stop > bottomElement) {
$('.header').addClass('isFixed');
} else {
$('.header').removeClass('isFixed');
}
});
https://jsfiddle.net/npfc8wsx/1/
I answered something like that few days ago. please take a look at this code:
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
var scrollToVid = $('#test').offset().top
console.log(scrollTop); //see window scroll distance //
console.log(scrollToVid); //see scroll to div offest//
if ($(window).scrollTop() >= scrollToVid) {
alert('You reached to the video!');
}
});
jSFiddle
Main Question
now for you some code must change:
$(window).scroll(function () {
var scrollToElem = $('.dividerWrap').offset().top
if ($(window).scrollTop() >= scrollToElem) {
$('.header').addClass('isFixed');
} else {
$('.header').removeClass('isFixed');
}
});
I am trying to make a div change class to fixed when it reach the top of the page.
I have this JavaScript code.
<script type="text/javascript">
$(function () {
var top = 200;
var y = $(this).scrollTop();
if (y >= top) {
// if so, add the fixed class
$('#kolonne-v').addClass('fixed');
} else {
// otherwise remove it
$('#kolonne-v').removeClass('fixed');
}
});
</script>
What am i doing wrong?
Demo jsFiddle
JS
$(function () {
var top = 200;
//this should be the offset of the top of your div
//which can be found by doing the following line
//var top = $("#kolonne-v").offset().top;
$(window).on('scroll', function () {
if (top <= $(window).scrollTop()) {
// if so, add the fixed class
$('#kolonne-v').addClass('fixed');
} else {
// otherwise remove it
$('#kolonne-v').removeClass('fixed');
}
})
});
Description
This uses the jquery .on('scroll', handler) method, documentation here. The basic principal is that on document.ready you set the scroll point when your div becomes fixed to the top. Then you setup an .on('scroll', handler) event that triggers whenever the window is scrolled in. If the user scrolls to your point you add the fixed CSS class.
I am trying to set up infinite-scroll on a site I am developing with Coldfusion, I am new to javascript and jquery so I am having some issues wrapping my head around all of this. Do I need to have pagination on my site in order to use the infinite-scroll plugin, or is there a way to do it with out it?
You do not need infinite scroll plug-in for this. To detect when scroll reaches end of page, with jQuery you can do
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
//Add something at the end of the page
}
});
Demo on JsFiddle
I'm using Hussein's answer with AJAX requests. I modified the code to trigger at 300px instead of 10px, but it started causing my appends to multiply before the AJAX request was finished since the scroll call triggers much more frequently in a 300px range than a 10px range.
To fix this, I added a trigger that would be flipped on successful AJAX load. My code looks more like this:
var scrollLoad = true;
$(window).scroll(function () {
if (scrollLoad && $(window).scrollTop() >= $(document).height() - $(window).height() - 300) {
scrollLoad = false;
//Add something at the end of the page
}
});
then in my AJAX response, I set scrollLoad to true.
I built on top of Hussein's little example here to make a jQuery widget. It supports localStorage to temporarily save appended results and it has pause functionality to stop the appending every so often, requiring a click to continue.
Give it a try:
http://www.hawkee.com/snippet/9445/
$(function(){
$(window).scroll(function(){
if($(document).height()<=$(window).scrollTop()+$(window).height()+100){
alert('end of page');
}
});
});
Some one asked for explanation so here is the explanation
here $(document).height()-->is the height of the entire document.In most cases, this is equal to the element of the current document.
$(window).height()-->is the height of the window (browser) means height of whatever you are seeing on browser.
$(window).scrollTop()-->The Element.scrollTop property gets or sets the number of pixels that the content of an element is scrolled upward. An element's scrollTop is a measurement of the distance of an element's top to its topmost visible content. When an element content does not generate a vertical scrollbar, then its scrollTop value defaults to 0.
$(document).height()<=$(window).scrollTop()+$(window).height()+100
add $(window).scrollTop() with $(window).height() now check whether the result is equal to your documnet height or not. if it is equal means you reached at the end.we are adding 100 too because i want to check before the 100 pixels from the bottom of document(note <= in condition)
please correct me if i am wrong
I had same problem but didn't find suitable plugin for my need. so I wrote following code. this code appends template to element by getting data with ajax and pagination.
for detecting when user scrolls to bottom of div I used this condition:
var t = $("#infiniteContent").offset().top;
var h = $("#infiniteContent").height();
var ws = $(window).scrollTop();
var dh = $(document).height();
var wh = $(window).height();
if (dh - (wh + ws) < dh - (h + t)) {
//now you are at bottom of #infiniteContent element
}
$(document).ready(function(){
$.getJSON("https://jsonplaceholder.typicode.com/comments", { _page: 1, _limit:3 }, function (jsonre) {
appendTemplate(jsonre,1);
});
});
function appendTemplate(jsonre, pageNumber){
//instead of this code you can use a templating plugin like "Mustache"
for(var i =0; i<jsonre.length; i++){
$("#infiniteContent").append("<div class='item'><h2>"+jsonre[i].name+"</h2><p>"+jsonre[i].body+"</p></div>");
}
if (jsonre.length) {
$("#infiniteContent").attr("data-page", parseInt(pageNumber)+1);
$(window).on("scroll", initScroll);
//scroll event will not trigger if window size is greater than or equal to document size
var dh = $(document).height() , wh = $(window).height();
if(wh>=dh){
initScroll();
}
}
else {
$("#infiniteContent").attr("data-page", "");
}
}
function initScroll() {
var t = $("#infiniteContent").offset().top;
var h = $("#infiniteContent").height();
var ws = $(window).scrollTop();
var dh = $(document).height();
var wh = $(window).height();
if (dh - (wh + ws) < dh - (h + t)) {
$(window).off('scroll');
var p = $("#infiniteContent").attr("data-page");
if (p) {
$.getJSON("https://jsonplaceholder.typicode.com/comments", { _page: p, _limit:3 }, function (jsonre) {
appendTemplate(jsonre, p);
});
}
}
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="infiniteContent"></div>
If you have a scrollable element, like a div with scroll overflow, but no scrollable document/page, you can take this way.
$(function () {
var s = $(".your-scrollable-element");
var list = $("#your-table-list");
/* On element scroll */
s.scroll(function () {
/* The scroll top plus element height equals to table height */
if ((s.scrollTop() + s.height()) == list.height()) {
/* you code */
}
});
});
I wrote this function using Hussein and Nick's ideas, but I wanted it to use promises for the callback. I also wanted the infinite scrolling area to be on a fixed div and not just the window if the div is sent into the options object. There is an example of that in my second link below. I suggest using a promise library like Q if you want to support older browsers. The cb method may or may not be a promise and it will work regardless.
It is used like so:
html
<div id="feed"></div>
js
var infScroll = infiniteScroll({
cb: function () {
return doSomethingPossiblyAnAJAXPromise();
}
});
If you want the feed to temporarily stop you can return false in the cb method. Useful if you have hit the end of the feed. It can be be started again by calling the infiniteScroll's returned object method 'setShouldLoad' and passing in true and example to go along with the above code.
infScroll.setShouldLoad(true);
The function for infinite scrolling is this
function infiniteScroll (options) {
// these options can be overwritten by the sent in options
var defaultOptions = {
binder: $(window), // parent scrollable element
loadSpot: 300, //
feedContainer: $("#feed"), // container
cb: function () { },
}
options = $.extend(defaultOptions, options);
options.shouldLoad = true;
var returnedOptions = {
setShouldLoad: function (bool) { options.shouldLoad = bool; if(bool) { scrollHandler(); } },
};
function scrollHandler () {
var scrollTop = options.binder.scrollTop();
var height = options.binder[0].innerHeight || options.binder.height();
if (options.shouldLoad && scrollTop >= (options.binder[0].scrollHeight || $(document).height()) - height - options.loadSpot) {
options.shouldLoad = false;
if(typeof options.cb === "function") {
new Promise(function (resolve) {resolve();}).then(function() { return options.cb(); }).then(function (isNotFinished) {
if(typeof isNotFinished === "boolean") {
options.shouldLoad = isNotFinished;
}
});
}
}
}
options.binder.scroll(scrollHandler);
scrollHandler();
return returnedOptions;
}
1 feed example with window as scroller
2 feed example with feed as scroller