Is there a way to set an array of html elements. say Section_1, Section_2, and Section_3 are within said array. While the user scrolls down the page, and only on down-scroll, is it possible to check whether the user scrolls by sections that are specified in that array? Kinda like...
var readerLocation = 150;
var content = ['block_1', 'block_2', 'block_3'];
bottom = $(window).height() + $(window).scrollTop();
height = $(document).height();
// If user starts to scroll send an event
if (bottom > readerLocation) {
console.log('started reading');
var i = 0;
for (block in content) {
console.log(content[i]);
//check if scrolled past element in array here()
i++;
}
}
What you can do is set a $(window).scroll() event.
For each element in your array, you want to find its offset within the page, and compare it to your current $(window).scrollTop(). Whenever it passes say the offset().top of Section_1, then you know that it's in section 1 and has not yet reached section 2.
Here is a code sample that will take you close to where you want to be:
A few things to keep in mind:
Run your code by specifying your conditions within the array foreach loop.
Make sure to keep track of variables rather than applying code on the fly.
Since you are using jQuery, make good use of $(window).scroll to keep track of your scroll events.
$(document).ready(function(){
var lastScrollTop = 0,
block = ['block_2', 'block_5', 'block_7'];
$(window).scroll(function(event){
var st = $(this).scrollTop(),
block_2_offset = $('#' + block[0]).offset().top;
if (st > lastScrollTop){
// downscroll
block.forEach(function(block, i) {
// check if we passed through on scroll down, then do something, modify the condition for a more specialized response
if(st >= $('#' + content[i]).offset().top){
// do something
}
});
}
lastScrollTop = st;
});
});
div {
padding-bottom: 500px;
text-align: center;
}
div:nth-child(3) {
background-color: blue;
}
div:nth-child(6) {
background-color: yellow;
}
div:nth-child(8) {
background-color: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block_1">
block 1
</div>
<div id="block_2">
block 2
</div>
<div id="block_3">
block 3
</div>
<div id="block_4">
block 4
</div>
<div id="block_5">
block 5
</div>
<div id="block_6">
block 6
</div>
<div id="block_7">
block 7
</div>
<div id="block_8">
block 8
</div>
<div id="block_9">
block 9
</div>
Related
I have a one-page website where I am adding a class while the user clicks on nav. However, if the user has scroll 100px from the current location the class need to remove.
DEMO gh pages link
//working fine
var scrollvalue = 0;
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
scrollvalue = $(window).scrollTop();
$(".copyright").addClass("activecopy");
});
//not working fine
$(window).scroll(function() {
if($(window).scrollTop() > 100) {
$('.copyright').removeClass('activecopy');
}
});
Note: I have already read stackoverflow post such as post1 and post2
It's a little hard to figure out what exactly the problem is as you have no shared the corresponding HTML markup. Try the following and let me know if it helps.
var scrollvalue = 0;
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function () {
scrollvalue = $(window).scrollTop();
$(".copyright").addClass("activecopy");
});
$(window).scroll(function () {
if (($(window).scrollTop() - scrollvalue) > 100) {
$('.copyright').removeClass('activecopy');
}
});
EDIT:
As I said, it's hard to see what's happening because you haven't shared markup. Here is a sample. Hope it helps.
EDIT 2:
To make this generic, you can wrap your code which registers for click listeners and scroll listeners in a function which accepts which elements to operate on as arguments. Sample Below.
function registerScrollTrigger(anchor, target) {
var $a = $(anchor);
var $t = $(target);
$a.click(function() {
//Get scroll position at the time of the click
var currentScroll = $(window).scrollTop();
function handleScroll() {
// Demo code to show current scroll on the screen
$t.html('Current Scroll: ' + ($(window).scrollTop() - currentScroll));
// Check if the user has scrolled 100px since clicking the tag
if (($(window).scrollTop() - currentScroll) > 100) {
// Remove active class from element
$t.removeClass('active');
// Demo code ti indicate that the scroll to 100px is complete
$t.html('Complete');
// Stop listening for scroll events [Optional but recommmended]
$(window).off('scroll', handleScroll);
}
}
// Add active class to element [Make it blue]
$t.addClass('active');
// Listen for scroll event and check if 100px has passed
$(window).scroll(handleScroll);
});
}
registerScrollTrigger('#a1', '#scroll1');
registerScrollTrigger('#a2', '#scroll2');
div.scroll {
margin-top: 50px;
}
div.scroll.active {
background: blue;
color: white;
}
div#pad {
height: 1000px;
}
h4 {
margin-bottom: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h4>Scroll Down For the Button</h4>
<a id="a1" class="js-scroll">Click Me </a>
<div id="scroll1" class="scroll">
Start scrolling after clicking the above button
</div>
<h4>Scroll Down For Another Button</h4>
<a id="a2" class="js-scroll">Click Me Too</a>
<div id="scroll2" class="scroll">
Start scrolling after clicking the above button
</div>
<div id="pad"></div>
Note:
You can also do something similar by setting a data-target attribute on the anchor which can be used to determine which item to add the class to and remove the class from instead of passing both items as a parameter
$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > 100) {
$(".copyright").addClass("activecopy");
} else {
$('.copyright').removeClass('activecopy');
}
});
I am using this for showing my gototop button in bottom. Hope this will works for you.....
I have taken a reference of the below site and i want to add text effects ie opacity gets fade on page scroll. The above code is working properly if i use the below reference as it is but if i add many div then it gets faded early not reaching the required div
http://jsfiddle.net/HsRpT/134/
Here is what i have done and the text fade effects goes early without reaching the actual div. Is there any other way of solving this problem?
<div>
fsdfdfsdfffffffffff<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>><br><br><br>
</div>
<div class="block">
<h2>Fade this in / out as scroll down</h2>
</div>
<div class="content">
<div class="headerbar">
</div>
</div>
Try
$(window).scroll(function() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > 200) {
$('.block').stop(true, true).fadeOut();
}
else {
$('.block').stop(true, true).fadeIn('fast');
}
});
Fiddle
current_div="div1";
$(window).scroll(function() {
current_div = scroll_content();
console.log(current_div);
if(current_div=="last"){
don't fade out
}
});
function scroll_content(){
var winTop = $(this).scrollTop();
var $divs = $('section');
var top = $.grep($divs, function(item) {
return $(item).position().top <= winTop;
});
var cur=top[top.length - 1];
return $(cur).attr('id');
}
You can get the the id of the div which is going out of screen while scrolling. So you can do what ever you want to do with the divs after getting the id .
It worked for me.
Let me know if you any other query.
My boss asked me to mimic this site:
http://mailchimp.com/2013/#by-the-numbers
I've been able to figure out every piece except for the white numbers. The really cool (but tricky) effect is that the speed of the count accelerates/decelerates depending on the data-count attribute, even though the distance between sections is the same.
It looks like they used waypoints.js to differentiate between sections. I searched for a plug-in that would adjust speed depending on the data inputs, but I could only find ones like countTo.js which trigger then count, rather than continuously count up and down as the user scrolls.
Any help would be greatly appreciated!
This intrigued me, so I gave it a shot.
As far as I know, waypoints.js only fires when an element hits the edge of the viewport. I don't think you could use it for this kind of thing, because you need to continually update your counter. So I wrote this without any jQuery plugin.
Disclaimer: This code may or may not work for you, either way, please regard it as nothing more than a sketch of a solution, it still needs to be improved in several places to be used for a production site.
var current = $('.step').first();
$('.step').each(function() {
var start = $(this).data('count'),
end = $(this).next().data('count'),
height = $(this).height(),
offset = $(this).offset().top,
increment = end ? height / (end - start) : 0; //after how many pixels of scrolling do we need to incremwent our counter? Set to 0 for last element, just in case
// just adding the count as text, so it gets displayed
$(this).text(start);
//store increment and offset, we need those in our scrollListener
$(this).data({
increment: increment,
offset: offset
});
});
$(document).on('scroll', function() {
var scrollpos = $(window).scrollTop(),
elementscrollpos,
counter;
//check if scrolled to the next element
if (current.next().data('offset') < scrollpos) {
current = current.next();
} else if (current.data('offset') > scrollpos) {
current = current.prev();
}
//calculate the current counter value;
elementscrollpos = scrollpos - current.data('offset');
counter = Math.floor(current.data('count') + elementscrollpos / current.data('increment'));
$('.counter').text(counter);
});
body {
margin: 0;
}
.counter {
position: fixed;
top: 0;
left: 0;
}
.step {
height: 100vh;
text-align: center;
font-size: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="counter"></div>
<div class="step" data-count="0"></div>
<div class="step" data-count="1"></div>
<div class="step" data-count="2"></div>
<div class="step" data-count="8"></div>
<div class="step" data-count="100"></div>
<div class="step" data-count="110240"></div>
<div class="step" data-count="110250"></div>
I have these "pages" aka div's inside a scrollable container. On command, I am trying to find out what part of the div in question, is touching the top of .pageContent.
So for example, right when the page loads, no part of #page_1 is touching the top of pageContent, but as I scroll down. #page_1 hits the top of .pageContent and I now want to figure out where that is.
I know I can get the position of .pageContent using $("#pageContent").scrollTop() but these page's could be different sizes and I am not sure how to go about figuring it out.
Could anyone put me in the right direction?
jsfiddle
HTML
<div id="pageContent">
<div id="page_1" class="content"></div>
<div id="page_2" class="content"></div>
<div id="page_3" class="content"></div>
</div>
CSS
#pageContent {
overflow: auto;
width:500px;
height:300px;
padding:10px;
border:1px solid black;
background-color:grey;
}
.content {
height:400px;
width:300px;
margin:0 auto;
background-color:red;
margin-bottom:10px;
}
You can use the jQuery .position() function to compute where each page is in relation to the top of the container. See this Fiddle.
For example, for #page_1,
var page1 = $('#page_1');
$('#pageContent').scroll(function() {
// page1.position().top gives the position of page_1 relative to the
// top of #pageContent
});
ScrollTop can be used, be I wouldn't recommend it.
Attach a scroll event to your main div and listener for all the objects inside:
$('#pageContent').scroll(function(){
var pages = $("#pageContent > .content");
for (var i = 0; i < pages.length; i++)
{
if ($(pages[i]).position().top < 0 && ( $(pages[i]).position().top + $(pages[i]).outerHeight() ) > 0)
{
var outerHeight = $(pages[i]).outerHeight();
var pixels = (outerHeight - (outerHeight + $(pages[i]).position().top));
console.log("These pixels are in view between: " + pixels + " and " + outerHeight );
}
}
})
Every time the div scroll a loop is performed checking the position of all elements. If the elements scroll out of view a the top the if is triggered, calculating the remaining visible pixels of the page currently visible.
This uses jQuery's: position() and outerHeight() and JavaScript's native offsetTop.
http://jsfiddle.net/q5aaLo9L/4/
I tried something like this
$(document).ready(function () {
var divs = $('.content').map(function (i, el) {
return $(el).offset().top - $(el).parent().offset().top;
});
$('#pageContent').scroll(function () {
var index = findIndex($(this).scrollTop(), divs) - 1;
if (index > -1) {
console.log($(this).children().eq(index).attr('id'));
} else {
console.log('outside');
}
});
});
function findIndex(pos, divs) {
return (divs.filter(function (el, et) {
return et <= pos
}).length);
}
It's not super clean code because I had to do it quickly.
DEMO
I hope this helps
I mocked this up, it uses JQuery's each() function to iterate through the pages and return the information of the page that has breached the top of the box.
I wasn't sure from your question exactly what you wanted returned, so I got it to return either the percentage of the page that has cleared the top border, the position (as negative value of pixels) of the top of the "page " in relation to the content container, and also just the ID of that div.
var getCurrentPage = function(){
var page;
var position;
var percentageRead;
$('.content').each(function(){
if($(this).position().top <= 0){
page = $(this);
position = $(this).position().top;
}
});
percentageRead = ((position *-1)/ $(page).height()* 100);
console.log(page.attr('id'));
console.log(position);
console.log(percentageRead + '%');
}
$('#pageContent').on('scroll', getCurrentPage);
You could fire this on any event but I used scroll to build it.
I am trying to create a page that is an endless scrolling loop both up and down.
At the moment I am using jquery to relocate content from the top of the page to the bottom. This creates a nice seemless loop when you scroll down but I would like it to work when the user scrolls up too.
The problem seems to be that even if content is positioned in negative vertical space on the page the scroll will not extend to that space. As far as I am aware there is no way to override this so I am looking for some type of work around.
I have thoughts of using javascript to disable the scrolling and using the scroll event to reposition the elements but there are already lots of absolute positioned elements and animation happening on the page so I'm concerned about performance taking that route.
Any other leads?
OK... I worked it out.
I adapted this script which instantly relocates the scroll location to the top of the page when you get to the bottom and to the bottom when you reach the top.
$(window).scroll(function() {
if ( $(window).scrollTop() >= 18830 ) {
$(window).scrollTop(201);
}
else if ( $(window).scrollTop() == 0 ) {
$(window).scrollTop(18629);
}
});
And then I made sure that the content at the bottom and the top of the page was identical. I thought that there would be a flash or something when this relocation happened but it's smooth!
The solution I like the best is this one (code), because it adds elements at the bottom before the bottom is reached, making sure that scrolling remains continuous (even with smooth scrolling on). However, it doesn't work that well on mobile phones where scrolling can happen pretty quickly. I recommend Marijn Haverbeke's wonderful article on fake scrollbars in CodeMirror where he deals with similar issues.
I leave you with some snippets.
First, some background. Why would we want to fake a scrollbar to begin with?
In order to remain responsive when huge documents are loaded in, CodeMirror does not render the whole document, but only the part of it that is currently scrolled into view. This means that the amount of DOM nodes it creates is limited by the size of the viewport, and the browser relayouts triggered by changes to the text are relatively cheap.
And further down...
Then, it listens to wheel events, but never calls preventDefault on them or does scrolling in response to them. Instead, it responds by setting a timeout to observe the amount of pixels that the wheel event did scroll the content, and uses that to tweak its delta-to-pixel rate at run-time.
Clone your HTML body two (or three) times (in javascript or otherwise). Start the page in the middle copy instead of the top, and then you can handle scrolling however you like.
Any other leads?
Seen these?
5 jQuery infinite Scrolling Demos
jsfiddle that I cannot find origin of. (I didn't write and don't know who did)
As many have suggested, if your page doesn't look exactly the same at the top and at the bottom you’ll need to clone your content to make it look like it does. I’ve made an example using this technique that works pretty smooth:
/*
Ininite looping scroll.
Tested and works well in latest Chrome, Safari and Firefox.
*/
(function (window) {
'use strict';
var doc = document,
body = doc.body,
html = doc.documentElement,
startElement = doc.getElementsByClassName('is-start')[0],
clones = doc.getElementsByClassName('is-clone'),
disableScroll = false,
docHeight,
scrollPos,
clonesHeight,
i;
function getScrollPos() {
return (window.pageYOffset || html.scrollTop) - (html.clientTop || 0);
}
function getDocHeight() {
return Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
}
function getClonesHeight() {
i = 0;
clonesHeight = 0;
for (i; i < clones.length; i += 1) {
clonesHeight = clonesHeight + clones[i].offsetHeight;
}
return clonesHeight;
}
docHeight = getDocHeight();
clonesHeight = getClonesHeight();
window.addEventListener('resize', function () {
scrollPos = getScrollPos();
docHeight = getDocHeight();
clonesHeight = getClonesHeight();
if (scrollPos <= 0) {
window.scroll(0, 1); // Scroll 1 pixel to allow upwards scrolling.
}
}, false);
window.addEventListener('scroll', function () {
if (disableScroll === false) {
scrollPos = getScrollPos();
if (clonesHeight + scrollPos >= docHeight) {
// Scroll to the top when you’ve reached the bottom
window.scroll(0, 1); // Scroll 1 pixel to allow upwards scrolling.
disableScroll = true;
} else if (scrollPos <= 0) {
// Scroll to the top of the clones when you reach the top.
window.scroll(0, docHeight - clonesHeight);
disableScroll = true;
}
if (disableScroll) {
// Disable scroll-repositioning for a while to avoid flickering.
window.setTimeout(function () {
disableScroll = false;
}, 100);
}
}
}, false);
// Needs a small delay in some browsers.
window.setTimeout(function () {
if (startElement) {
// Start at the middle of the starting block.
window.scroll(0, Math.round(startElement.getBoundingClientRect().top + document.body.scrollTop - (window.innerHeight - startElement.offsetHeight) / 2));
} else {
// Scroll 1 pixel to allow upwards scrolling.
window.scroll(0, 1);
}
});
}(this));
section {
position: relative;
text-align: center;
height: 80vh;
}
.red {
background: #FF4136;
}
.green {
background: #2ECC40;
}
.blue {
background: #0074D9;
}
.orange {
background: rebeccapurple;
}
h1 {
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
font-size: 5vw;
color: #fff;
text-transform: uppercase;
}
body {
font-family: "Avenir Next", Montserrat, Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
}
::scrollbar {
display: none;
}
<section class="green">
<h1>One</h1>
</section>
<section class="red">
<h1>For</h1>
</section>
<section class="blue">
<h1>All</h1>
</section>
<section class="orange">
<h1>And</h1>
</section>
<section class="blue">
<h1>All</h1>
</section>
<section class="red">
<h1>For</h1>
</section>
<!--
These following blocks are the same as the first blocks to get that looping illusion going. You need to add clones to fill out a full viewport height.
-->
<section class="green is-clone is-start">
<h1>One</h1>
</section>
<section class="red is-clone">
<h1>For</h1>
</section>
Building up on Mahmoud's answer, I hacked up this in a few minutes.
It works somewhat (at least on Firefox) when scrolling either with keys or with mouse wheel, but it gets all glitchy when dragging the scrollbar. Depending on how the div heights relate to the viewport height, all kinds of fireworks can happen too.
Still, I hope this can help you get on the right direction.
function onScroll(){
var SAFETY_MARGIN = 50,
scrollPos = $(this).scrollTop(),
docHeight = $(document.body).height(),
winHeight = $(window).height(),
firstDiv = $('body>div:first-child')[0],
lastDiv = $('body>div:last-child')[0],
lowerLimit = SAFETY_MARGIN,
higherLimit = docHeight - SAFETY_MARGIN;
// Scrolling too high
if( scrollPos <= lowerLimit ){
// Move content to top;
$(lastDiv).prependTo(document.body);
// Adjust scroll position to compensate
// for the new content at the top
$(window).scrollTop(scrollPos + $(lastDiv).height());
}
// Scrolling too low
else if( scrollPos + winHeight >= higherLimit ){
// Move content to bottom
$(firstDiv).appendTo(document.body);
// Adjust scroll position to compensate
// for the missing content at the top
$(window).scrollTop(scrollPos - $(firstDiv).height());
}
}
$(window).scroll(onScroll);
$(window).load(function(){
var $body = $(document.body);
$(window).scrollTop($body.height() / 2);
});
</script>
</head>
<body>
<div style="height: 600px; background-color: red"> </div>
<div style="height: 600px; background-color: green"> </div>
<div style="height: 600px; background-color: blue"> </div>
</body>
</html>