I have a function where I want to move the scroll down if it is at the top. But nothing happens, before and after the function value is still 0.
This is the code:
scrollDrawer = function () {
if (drawerIsUp) {
console.log($(window).scrollTop());
$(window).scroll(function() {
if ( $(window).scrollTop() < 92 ) {
$('html, body').animate({
scrollTop: $(".middle").offset().top
}, 2000);
}
});
console.log($(window).scrollTop());
function winScroll() {
drawerDiv.style.top = (drawerDiv.offset + window.pageYOffset) + "px";
}
}
}
Updated
console.log($(window).scrollTop());
$(window).scroll(function() {
if ( $("html,body").scrollTop() < 92 && $("html,body").scrollTop() > 0) {
$("html,body").scrollTop(800)
}
});
console.log($(window).scrollTop());
I have updated the code and modifed it by applying suggestions from the answers, but still the scroll doesn't get relocated. I wonder if that is maybe since when the page opens it is already at top 0, and I need to relocate it immediately without scrolling from the user in the first place.
Html:
<div id="app">
<div id="bg">
</div>
#section('topBar')
#include('customer.layouts.partials.top-bar')
#show
<div id="main-section">
#section('header')
#include('customer.layouts.partials.header')
#show
#section('carousel')
#include('customer.layouts.partials.carousel', ['function' => 'drawer', 'carouselPadding' => ''])
#show
</div>
<div id="drawer">
<div id="magazine-detail">
</div>
<div id="magazine-detail-carousel">
#section('magazine-detail-carousel')
#include('customer.layouts.partials.carousel', ['function' => 'magazineDetail', 'carouselPadding' => 'carouselPadding'])
#show
</div>
</div>
</div>
CSS:
#main-section {
height: calc(100vh - 92px);
overflow-y: scroll;
width: 100%;
position: fixed;
overflow-y: scroll;
top:77px;
}
#drawer {
z-index: 5;
position: fixed;
top: 100vh;
height: calc(100vh - 92px);
max-height: 100%;
overflow-y: scroll;
width: 100%;
background-color: $white;
padding-left: 15px;
padding-right: 15px;
}
.top-bar {
position: fixed;
top: 0;
}
On click div drawer that is first not visible since it is below the vh, goes over the top of the main-section all the way up to where the top-bar starts. This is the animation:
$('#drawer').animate({
top: 92
}, 500);
And then after that animation I want the scroll to start from the bottom so that I can when the user starts scrolling move the drawer back down again by the amount of pixels a user has scrolled up.
Try this
$(window).scroll(function() {
if ( $(window).scrollTop() < 92 ) {
// if want to animate scroll
$('html, body').animate({
scrollTop: $("body, html").offset(800)
}, 2000);
// otherwise
$("body, html").offset(800)
}
});
I think you make a mistake，you should addEventListener to window,and when the page init, window's scrollTop() eval 0,so your second example can't work.and the last,when the browser inited the page,all of console.log had excuted,so you would see two same result by console.log,you can try to move on into scroll function,so you can see the scrollTop of window when mouse scroll.
there are some example for you:
console.log($(window).scrollTop());
$(window).scroll(function() {
if ( $(window).scrollTop() < 92 && $(window).scrollTop() > -1) {
$(window).scrollTop(800);
}
console.log($(window).scrollTop());
});
the other one:
scrollDrawer = function () {
if (1) {
console.log($(window).scrollTop());
$(window).scroll(function() {
if ( $(window).scrollTop() < 92 ) {
$(window).scrollTop(800);
}
});
console.log($(window).scrollTop());
}
}
scrollDrawer();
This may not be exactly what you're looking for, but it is something that can work with a little css.
var wrap = $("#wrap");
wrap.on("scroll", function(e) {
if (this.scrollTop > 800) {
wrap.addClass("new");
} else {
wrap.removeClass("new");
}
});
Related
After getting my last problems solved properly I've got a second problem.
I've got a div which is fixed. Inside of the fixed div is another div which is scrollable. I want to achieve that if I scroll anywhere on the page, even out of the scrollable div, that the scroll action only applies to the scrollable div, not the fixed div.
I made an example of the problem. I want to achieve that if I am scrolling anywhere, even in the red part, that the scroll action is in the red div.
Demo:
$(window).scroll(function () {
var s = $(this).scrollTop();
var row1 = $('#row1');
if(s>500){
row1.css({
'position': 'relative'
});
}
});
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
overflow: scroll;
height: 100vh;
}
#row1 {
width: 100vw;
height:100vh;
position: fixed;
background-color:red;
}
.col-sm-6{width:50%;float:left;height:100px;}
#test{background-color:green;overflow-x:scroll;}
body{height:1000px}
<div class="row" id="row1">
<div class="col-sm-6"></div>
<div class="col-sm-6" id="test">scrollable div<br>test1<br>test2<br>test3<br>test4<br>test5<br>test6<br>test7<br>test8<br>test9<br>test10<br>test11</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
$(function () {
var myCounter = 0,
myOtherCounter = 0;
var scroll = 0;
$("#test").scroll(function () {
myCounter = myCounter + 1;
$("#log").html("<div>Handler for .scroll() called " + myCounter + " times.</div>");
});
//Firefox
$('#row1').bind('DOMMouseScroll', function (e) {
if (e.originalEvent.detail > 0) {
scrollDown();
} else {
scrollUp();
}
//prevent page fom scrolling
return false;
});
//IE, Opera, Safari
$('#row1').bind('mousewheel', function (e) {
if (e.originalEvent.wheelDelta < 0) {
scrollDown();
} else {
scrollUp();
}
//prevent page fom scrolling
return false;
});
function scrollDown() {
//scroll down
console.log('Down ' + scroll);
if (scroll < $('#test').find('div').height() - $('#test').height() + 20) {
scroll = $('#test').scrollTop() + 5;
$('#test').scrollTop(scroll);
}
};
function scrollUp() {
//scroll up
console.log('Up ' + scroll);
if (scroll > 0) {
scroll = $('#test').scrollTop() - 5;
$('#test').scrollTop(scroll);
}
};
});
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
overflow: scroll;
height: 100vh;
}
#row1 {
width: 100vw;
height:50vh;
position: fixed;
background-color:red;
}
.col-sm-6{width:50%;float:left;height:100px;}
#test{background-color:green;overflow-x:scroll;}
body{height:1000px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="row1">
<div class="col-sm-6" id="test"><div>scrollable div<br>test1<br>test2<br>test3<br>test4<br>test5<br>test6<br>test7<br>test8<br>test9<br>test10<br>test11</div></div>
<div id="log"></div>
<div id="log2"></div>
</div>
I have a problem with jQuery.
I want to add the fixed-top class (Bootstrap 4) when scrolling the page, but this is not the case.
jQuery(document).ready(function($){
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".robig").addClass("fixed-top");
} else {
$(".robig").removeClass("fixed-top");
}
});
Can you see what I'm doing wrong?
Your scroll variable is never being updated. You need to add your code into a scroll event like so:
jQuery(document).ready(function($) {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 130) {
$(".robig").addClass("fixed-top");
} else {
$(".robig").removeClass("fixed-top");
}
});
});
body {
margin: 0;
}
.foo {
height: 140vh;
background: black;
}
.robig {
width: 100%;
height: 10vh;
background: lime;
}
.fixed-top {
position: fixed;
top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foo"></div>
<div class="robig"></div>
<div class="foo"></div>
However, if you are trying to recreate a sticking effect, I suggest you use position: sticky as jquery isn't needed for this:
body {
margin: 0;
}
.foo {
height: 140vh;
background: black;
}
.robig {
width: 100%;
height: 10vh;
background: lime;
position: sticky;
top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foo"></div>
<div class="robig">Stop at top</div>
<div class="foo"></div>
Your code run on page load only but you need to run your code in scroll event of window
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll >= 500)
$(".robig").addClass("fixed-top");
else
$(".robig").removeClass("fixed-top");
});
Also you can simplify the code and use .toggleClass() instead
$(window).scroll(function(){
$(".robig").toggleClass("fixed-top", $(window).scrollTop() >= 500);
});
$(window).scroll(function(){
$(".robig").toggleClass("fixed-top", $(window).scrollTop() >= 500);
});
p {height: 500px}
.robig {
width: 100%;
background: red;
}
.fixed-top {
position: fixed;
top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>content</p>
<div class="robig">robig</div>
<p>content</p>
<p>content</p>
$(document).ready(function(){
var scroll = 0;
$(document).scroll(function() {
scroll = $(this).scrollTop();
if(scroll > 500) {
$(".robig").addClass("fixed-top");
} else {
$(".robig").removeClass("fixed-top");
}
});
});
You need to window scroll event. You can try below code
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() >= 130)
{
$(".robig").addClass("fixed-top");
}
else
{
$(".robig").removeClass("fixed-top");
}
});
});
I added a link into my page to scroll down:
<div class="scroll">
<a onclick="scroll_down()" href="#" id="'scroll_id">
click me
</a>
</div>
<script>
function scroll_down() {
var y = $(window).scrollTop(); //current position
$("html, body").animate({scrollTop: y + $(window).height()}, 600);
}
function scroll_top() {
window.scrollTo(0, 0);
}
</script>
I want to set onclick attribute when bottom is reached to scroll_top.
scroll down is working but when bottom is reached , the attribute of theonclick of <a> tag is not changed.
<script>
window.onscroll = function (ev) {
if ((window.innerHeight + window.scrollY) >= $(document).height()) {
console.log('bootom')
$('#scroll_id').attr('onClick', '');
$('#scroll_id').attr('onClick', 'scroll_top()');
}
}
</script>
do some body tell me where is the error ? why it's not working?
Using the on* event attributes is considered bad practice - and amending them at runtime is worse.
A much better solution is to use a single unobtrusive event handler which determines the current scroll position of the page and moves up/down as necessary, like this:
$(function() {
$('#scroll_id').click(function(e) {
e.preventDefault();
var $win = $(window);
var scrollTarget = $win.height() + $win.scrollTop() >= $(document).height() ? 0 : $win.scrollTop() + $win.height()
$("html, body").animate({
scrollTop: scrollTarget
}, 600);
});
});
.scroll {
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
#content {
height: 1000px;
position: relative;
}
#content div {
position: absolute;
}
#content .top {
top: 20px;
}
#content .middle {
top: 500px;
}
#content .bottom {
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroll">
click me
</div>
<div id="content">
<div class="top">top</div>
<div class="middle">middle</div>
<div class="bottom">bottom</div>
</div>
Syntax Error:
<a onclick="scroll_down()" href="#" id="'scroll_id">
it should be
id="scroll_id">
(removed extra ')
I want to check if the element is on the screen. It MUST NOT involve any kind of scrolling. I just want to check if the element is on the screen. I have tried different codes out there. They work perfectly fine on Desktops but not on mobile phones.
This is my current code:
var wScroll = $(this).scrollTop();
if(wScroll > $('.services').offset().top - ($(window).height() / 1.2)) {
$('.jstransitiononservices').each(function(i){
setTimeout(function(){
$('.jstransitiononservices').eq(i).addClass('is-showing');
}, 150 * (i+1));
});
}
You can use Element.getBoundingClientRect() method on window scroll and you can look for top property of the returned object:
$(document).ready(function() {
var target = $('.services')[0].getBoundingClientRect();
console.log(target, $(window).scrollTop());
if (target.top <= $(window).scrollTop()) {
$('pre').html('Element is in view.');
}
});
body {
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='services'>services div</div>
<pre></pre>
This one with scroll:
$(window).scroll(function() {
var target = $('.services')[0].getBoundingClientRect();
console.log(target, window.innerHeight);
if (target.top <= $(window).scrollTop() && target.bottom <= window.innerHeight) {
$('pre').html('Element is in view.');
}
}).scroll(); // <----this triggers scroll on page load.
body {
margin: 0;
padding: 0;
height:800px;
}
.services{margin:500px 0 0 0; border:solid 1px red;}
pre{position:fixed; left:0; top:0; width:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='services'>services div</div>
<pre></pre>
I'm currently swapping a logo for smaller logo when the user scrolls down the page. At the moment it's a straight swap. However I'd like to add a nice animated fade in/out so the larger logo fades out, smaller logo fades in and vice-versa.
Here's a pen of my current attempt: http://codepen.io/abbasinho/pen/yyomrB
I've tried to adding fadeIn but with not joy.
JS:
$(function() {
var logo = $(".lrg-logo");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
logo.removeClass('lrg-logo').addClass("sml-logo").fadeIn( "slow");
} else {
logo.removeClass("sml-logo").addClass('lrg-logo').fadeIn( "slow");
}
});
});
CSS:
.wrapper {
height: 2000px;
position: relative;
background: green;
}
header {
position: fixed;
width: 100%;
height: 50px;
background: grey;
}
.lrg-logo {
width: 300px;
height: 50px;
text-align: center;
background: red;
}
.sml-logo {
width: 200px;
height: 20px;
text-align: center;
background: red;
}
2 things:
logo must first be hidden in order to fade it in.
fade should not happen on every scroll event, but just once when scrolltop > 500
$(function() {
var logo = $(".lrg-logo");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
if(!logo.hasClass("sml-logo")) {
logo.hide();
logo.removeClass('lrg-logo').addClass("sml-logo").fadeIn( "slow");
}
} else {
if(!logo.hasClass("lrg-logo")) {
logo.hide();
logo.removeClass("sml-logo").addClass('lrg-logo').fadeIn( "slow");
}
}
});
});
Use this
$(function() {
var logo = $(".lrg-logo");
var scrolling = false;
var small = false;
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500 && !scrolling && !small) {
scrolling = true;
logo.fadeOut(300);
window.setTimeout(function() {
logo.fadeIn( 300).removeClass('lrg-logo').addClass("sml-logo");
scrolling = false;
small = true;
}, 300);
} else if(!scrolling && small) {
scrolling = true;
logo.fadeOut( 300);
window.setTimeout(function() {
logo.fadeIn( 300).removeClass('sml-logo').addClass("lrg-logo");
scrolling = false;
small = false;
}, 300);
}
});
});
I have two flags. One to see if its currently animating or not. Another one to check if its small or large.
http://codepen.io/anon/pen/jEGNbN
the code is in the link above