Long time ago I found somewhere (on stackoverflow I think) code to scroll one window height per scroll. I tried many libraries but that script works just like I want. But it's jumpy when scrolling during animation. So I disable scroll during animation but it works only in Firefox.
I made a fiddle: https://jsfiddle.net/msoys5gc/1/
if( $(window).scrollTop() < $(window).height() * 6 ) {
window.onwheel = function(){ return false; };
}
$('html,body').stop().animate({
scrollTop: divs.eq(div).offset().top
}, 600, function() {
window.onwheel = function(){ return true; };
});
I don`t understand this:
if( $(window).scrollTop() < $(window).height() * 6 )
this will be true until you pass the six slide...
UPDATED: If you want to stop triggering the animation while it is running you can just delete the stop(). Then if you don't want to enqueue animations(and then get strange behaviors), you can just call clearQueue() when the animation has finished.
var divs = $('.section');
var dir = 'up'; // wheel scroll direction
var div = 0; // current div
$(document.body).on('DOMMouseScroll mousewheel', function (e) {
if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
dir = 'down';
}
else {
dir = 'up';
}
// find currently visible div :
div = -1;
divs.each(function(i){
if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
div = i;
}
});
if (dir == 'up' && div > 0) {
div--;
}
if (dir == 'down' && div < divs.length) {
div++;
}
$('html,body').animate({
scrollTop: divs.eq(div).offset().top
}, 1600, function() {
$('html,body').clearQueue();
});
return false;
});
$(window).resize(function () {
$('html,body').scrollTop(divs.eq(div).offset().top);
});
.section {
height: 100vh;
}
body{
margin: 0px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section" style="background: yellow;"></div>
<div class="section" style="background: green;"></div>
<div class="section" style="background: blue;"></div>
<div class="section" style="background: red;"></div>
<div class="section" style="background: violet;"></div>
<div class="section" style="background: orange;"></div>
<div class="section" style="background: black;"></div>
Related
js and html are not my strong suit but I'm trying to achieve a two simplish effects on the same page.
The user scrolls down the page and the background image/background colour changes as the divs come into view and then leave the screen.
The colors (.panel class) are working great but the image (.fadeimage) is not working at all.
HTML:
<div class="fadeimage">
<h2>image panel</h2>
</div>
<div class="panel" data-color="green">
<h2>Indigo panel</h2>
</div>
<div class="panel" data-color="blue">
<h2>Blue panel</h2>
</div>
<div class="fadeimage">
<h2>image panel</h2>
</div>
<div class="panel" data-color="yellow">
<h2>Yellow panel</h2>
</div>
CSS:
body {
color: #000;
background-color: #f4f4f4;
transition: background-color 1s ease;
}
.panel {
min-height: 100vh;
}
.fadeimage {
opacity: 0;
transition: 0.3s;
background-image: url("/New Page/images/testtakeall.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* colours */
.color-blue {
background-color: #2F8FED;
}
.color-green {
background-color: #4DCF42;
}
.color-yellow {
background-color: #FAEB33;
}
JS: EDITED: This this function breaks while $fadeimage.each(...) is included... it works if I remove it... but obviously this means no image fadein.
$(window).scroll(function() {
// selectors
var $window = $(window),
$body = $('body'),
$panel = $('.panel');
// Change 33% earlier than scroll position so colour is there when you arrive.
var scroll = $window.scrollTop() + ($window.height() / 3);
$fadeimage.each(function () {
var $this = $this;
if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
$this.css('opacity', 1);
}
else {$this.css('opacity', 0)}
})
$panel.each(function () {
var $this = $(this);
// if position is within range of this panel.
// So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
// Remember we set the scroll to 33% earlier in scroll var.
if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
// Remove all classes on body with color-
$body.removeClass(function (index, css) {
return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
});
// Add class of currently active div
$body.addClass('color-' + $(this).data('color'));
}
}).scroll();
The opacity of the divs with .fadeimage as a class just stays at 0 the whole time...
You can't use two scroll functions for same document. Instead, try to move everything in one scroll function:
$(window).scroll(function () {
// Add $fadeimage to these variables
var $window = $(window),
$body = $("body"),
$panel = $(".panel"),
$fadeimage = $(".fadeimage");
var scroll = $window.scrollTop() + $window.height() / 3;
$panel.each(function () {
var $this = $(this);
if ( $this.position().top <= scroll && $this.position().top + $this.height() > scroll ) {
$body.removeClass(function (index, css) {
return (css.match(/(^|\s)color-\S+/g) || []).join(" ");
});
$body.addClass("color-" + $(this).data("color"));
}
});
$fadeimage.each(function () {
var $this = $this;
if ( $this.position().top <= scroll && $this.position().top + $this.height() > scroll ) {
$this.css("opacity", 1);
} else {
$this.css("opacity", 0);
}
});
}).scroll();
I'm using multiple number elements on my site which are counting up after hitting the visible area of the viewport.
That part works until the user manually scrolls the page. If the user scrolls up or down, the animation stops for a second and repeats when the user don't scroll anymore. It looks very buggy.
If I try to replicate the problem in a fiddle, the same code always works without the "stuttering"?
jQuery(function($) {
$(function($, win) {
$.fn.inViewport = function(cb) {
return this.each(function(i, el) {
function visPx() {
var H = $(this).height(),
r = el.getBoundingClientRect(),
t = r.top,
b = r.bottom;
return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
}
visPx();
$(win).on("resize scroll", visPx);
});
};
}(jQuery, window));
$(".fig-number").inViewport(function(px) {
// if px>0 (entered V.port) and
// if prop initNumAnim flag is not yet set = Animate numbers
if (px > 0 && !this.initNumAnim) {
this.initNumAnim = true; // Set flag to true to prevent re-running the same animation
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 10000,
step: function(now) {
$(this).text(Math.ceil(now));
}
});
}
});
});
html,
body {
height: 100%;
}
.spacer {
height: 100%;
width: 100%;
display: block;
background: red;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="spacer">
scroll down
</div>
<div class="number-box">
<h1 class="fig-number">1000</h1>
<h1 class="fig-number">1500</h1>
</div>
<div class="spacer">
scroll down
</div>
<div class="number-box">
<h1 class="fig-number">2000</h1>
<h1 class="fig-number">2500</h1>
</div>
<div class="spacer">
scroll down
</div>
<div class="number-box">
<h1 class="fig-number">3000</h1>
<h1 class="fig-number">3500</h1>
</div>
The working fiddle (same code): https://jsfiddle.net/JSCray/r7g0vn93/3/
i want to try fullpage scroll 100vh on every scroll event but
its showing an error Property 'detail' and wheelDelta does not exist on type 'Event' in this line
if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0)
my about.ts file are
ngOnInit() {
// snapy fullpage scroll
$(document).ready(function () {
var divs = $('.mydiv');
var dir = 'up'; // wheel scroll direction
var div = 0; // current div
$(document.body).on('DOMMouseScroll mousewheel', function (e) {
if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
dir = 'down';
} else {
dir = 'up';
}
// find currently visible div :
div = -1;
divs.each(function(i){
if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
div = i;
}
});
if (dir == 'up' && div > 0) {
div--;
}
if (dir == 'down' && div < divs.length) {
div++;
}
//console.log(div, dir, divs.length);
$('html,body').stop().animate({
scrollTop: divs.eq(div).offset().top
}, 200);
return false;
});
$(window).resize(function () {
$('html,body').scrollTop(divs.eq(div).offset().top);
});
});
}
.html file are
<div class="mydiv" style="text-align:center; color:green">Gallery</div>
<div class="mydiv" style="background-color: #aaa">Page 1</div>
<div class="mydiv" style="background-color: #444">Page 2</div>
<div class="mydiv" style="background-color: blue">Page 3</div>
<div class="mydiv" style="background-color: #ccc">Page 4</div>
<div class="mydiv" style="background-color: yellow">Page 5</div>
.css file are
html, body, body>div {
height:100%;
color:yellow;
}
I have a page where I want an image to appear after scrolling say 500px and I used the "If you want to show a div after scrolling a number of pixels, WITHOUT jquery" code snippet from apaul34208 (show div after 800px scroll). My adapted code is like this:
<!DOCTYPE html>
<html>
<body>
<div id="myID" class="pointer hide">
<img src="image.png">
</div>
<script>
myID = document.getElementById("myID");
var myScrollFunc = function () {
var y = window.scrollY;
if (y >= 400) {
myID.className = "pointer show"
} else {
myID.className = "pointer hide"
}
};
window.addEventListener("scroll", myScrollFunc);
</script>
</body>
</html>
and CSS:
.hide {
display: none;
}
.show {
display: block;
margin-top: -80px;
}
Only problem is that I would also like it to DISAPPEAR again lets say 400 px from the bottom of the page. the page-height differs from page to page so I cant just set a range like underneath from say 400-1000 px.
<script>
myID = document.getElementById("myID");
var myScrollFunc = function () {
var y = window.scrollY;
if (y >= 400 & y <= 1000 ) {
myID.className = "pointer show"
} else {
myID.className = "pointer hide"
}
};
window.addEventListener("scroll", myScrollFunc);
</script>
</body>
</html>
Anyone have any idea how I can make this happen?
Thanks guys!
$(document).ready(function() {
$(window).scroll(function() {
console.log('scrolling ', $(window).scrollTop(), $(document).height());
if ($(window).scrollTop() >= 400 && $(window).scrollTop() <= ($(document).height() - 600)) {
$('#myID').removeClass('hide');
}
else {
$('#myID').addClass('hide');
}
});
});
.hide {
display: none;
}
.body {
height: 2000px;
}
#myID {
background-color: lightgray;
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
<div id="myID" class="pointer hide">
STUFF HERE
</div>
</div>
use document.height to get the height of the document and rest the desired value:
myID = document.getElementById("myID");
var myScrollFunc = function () {
var y = window.scrollY;
if (y >= 400 & y <= document.height - 400) {
myID.className = "pointer show";
} else {
myID.className = "pointer hide";
}
};
window.addEventListener("scroll", myScrollFunc);
i need help my stuff isn't working i'm not sure why. It's a scroll function that moves a navigation bar 20 px down if the window isn't at the top of document. And its supposed to move back 20px once the window is scrolled to the top.
<script type="text/javascript">
$(window).scroll(function(){
if( $(window).scrollTop() == $(document).height()- $(window).height() ){
$('#nav_space').animate({top:'20px'},200);
}
else {
$('#nav_space').animate({top:'-3px'},200);
}
});
</script>
<div id="nav_space">
<div id="nav_symbol">
</div>
<div id="nav_name">
<h3>Ascension</h3>
<span style="position: absolute; left: 19px; top: 39px;">Entertainment</span>
</div>
You can simplify using scrollTop(). Change your javascript to this instead:
$(window).scroll(function(){
if( $(window).scrollTop() > 0){
$('#nav_space').animate({top:'20px'},200);
}
else {
$('#nav_space').animate({top:'-3px'},200);
}
});