I tried to put together following codes but doesn't work. when i down scroll, page up button appears and when i click it, scroll is to be top of page. When i up the scroll to top of page, page down button appears and when i click it, it does same action with page up scroll.
var amountScrolledTop = 200;
var amountScrolledDown = 50;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolledTop ) {
$('a.back-to-top').fadeIn('slow');
} else {
$('a.back-to-top').fadeOut('slow');
}
if ( $(window).scrollTop() < amountScrolledDown ) {
$('a.down1').fadeIn('slow');
} else {
$('a.down1').fadeOut('slow');
}
});
$('a.back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 'slow');
return false;
});
$('a.down1').click(function() {
var objDiv = document.getElementById("mid");
objDiv.scrollTop = objDiv.scrollHeight;
});
.down1{
width: 60px;
height: 60px;
text-indent: -9999px;
position: fixed;
z-index: 999;
right: 60px;
top: 80px;
background: url("../img/simple_icons/downArrow.png") no-repeat center 43%;
}
.back-to-top{
display: none;
width: 60px;
height: 60px;
text-indent: -9999px;
position: fixed;
z-index: 999;
right: 20px;
bottom: 20px;
background: url("../img/simple_icons/upArrow.png") no-repeat center 43%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
Down to
Back to Top
.
.
.
<div class="mid"></div>
</body>
Page down button always up the scroll to top of page. Even i erase all the javascript code.
I think this is what you were looking for, I put some comments on the code to describe the modifications I made.
var amountScrolledTop = 200;
var amountScrolledDown = 50;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolledTop ) {
$('a.back-to-top').fadeIn('slow');
} else {
$('a.back-to-top').fadeOut('slow');
}
if ( $(window).scrollTop() < amountScrolledDown ) {
$('a.down1').fadeIn('slow');
} else {
$('a.down1').fadeOut('slow');
}
});
$('a.back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 'slow');
return false;
});
$('a.down1').click(function(e) {
//you have to prevent the default action of the link (the default going to the top because of href="#" even if there is no javascript)
e.preventDefault();
//objDiv used to be "null" because it was defined by class not id in html
var objDiv = document.getElementById("mid");
$('html, body').animate({
scrollTop: objDiv.scrollHeight
}, 'slow');
});
.down1{
width: 60px;
height: 60px;
position: fixed;
z-index: 999;
right: 60px;
top: 80px;
background: url("../img/simple_icons/downArrow.png") no-repeat center 43%;
}
.back-to-top{
display: none;
width: 60px;
height: 60px;
position: fixed;
z-index: 999;
right: 20px;
bottom: 20px;
background: url("../img/simple_icons/upArrow.png") no-repeat center 43%;
}
#mid {
height: 2000px;
background-color: #bbb;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Down to
Back to Top
<!-- it was class="mid" -->
<div id="mid"></div>
Related
This is how I include the button in the body:
<?php require_once('scrollToTop.php'); ?>
This is my scroll tTo Top.php file:
<div class="btnScrollToTop" data-scroll="up" type="button">
<img src="images/paudie_scroll_top_icon.jpg" alt="">
This is the CSS for the button:
.btnScrollToTop {
position: fixed;
right: 20px;
bottom: 20px;
width: 50px;
width: 50px;
border: none;
z-index: 99;
}
This is my js file included in php footer as:
<script src="js/scroll.js"></script>
// JavaScript Document
const btnScrollToTop = document.querySelector(".btnScrollToTop");
btnScrollToTop.addEventListener("click", function() {
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth"
});
});
I am unable after a variety of attempts to get he button to appear only one the use has scroll 20px from the top of page.
Please help.
To do what you require you can retrieve the current window scroll position, check if it's higher than 20 and use it to toggle the display state of the button:
const btnScrollToTop = document.querySelector(".btnScrollToTop");
// scroll to top of page when button clicked
btnScrollToTop.addEventListener("click", e => {
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth"
});
});
// toggle 'scroll to top' based on scroll position
window.addEventListener('scroll', e => {
btnScrollToTop.style.display = window.scrollY > 20 ? 'block' : 'none';
});
h3 {
margin: 0 0 1000px;
}
.btnScrollToTop {
position: fixed;
right: 20px;
bottom: 20px;
width: 50px;
border: none;
z-index: 99;
display: none;
}
<h3>Scroll down...</h3>
<div class="btnScrollToTop" data-scroll="up" type="button">
<img src="images/paudie_scroll_top_icon.jpg" alt="Scroll to top" />
</div>
CSS:
.btnScrollToTop {
position: fixed;
right: 20px;
bottom: 20px;
width: 50px;
width: 50px;
border: none;
z-index: 99;
opacity: 0;
}
.btnScrollToTop.active{
opacity: 1;
}
JavaScript:
const btnScrollToTop = document.querySelector(".btnScrollToTop");
btnScrollToTop.addEventListener("click", function() {
window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
});
window.addEventListener("scroll", () => {
if (window.pageYOffset > 100) {
btnScrollToTop.classList.add("active");
} else {
btnScrollToTop.classList.remove("active");
}
});
I have made a page which has a transperant header and a logo in white color.
But when i scroll down my logo isn't visible because of white body color. I want to add black logo when i scroll down. How to do it ?
This is my code. :
$(window).on('scroll', function () {
if ($(this).scrollTop()) {
$('.navbar').addClass("shrink");
//$('.navbar-brand img').attr('src', 'images/logo.png');
}else{
$('.navbar').removeClass("shrink");
//$('.navbar-brand img').attr('src', 'images/logo.png');
}
});
but its not working
You need to add scroll amount. Replace your code with this one.
$(window).on('scroll', function () {
if ($(this).scrollTop() > 70) { // Set position from top
$('.navbar').addClass("shrink");
//$('.navbar-brand img').attr('src', 'images/logo.png');
}else{
$('.navbar').removeClass("shrink");
//$('.navbar-brand img').attr('src', 'images/logo.png');
}
});
Hope It works. Thanks !
Try This:
$(window).scroll(function(){
if($(this).scrollTop()>70) {
$('#header img').attr('src','https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/600px-Apple_logo_black.svg.png');
}
else {
$('#header img').attr('src','https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png');
}
})
body {
height: 1500px;
}
#header {
height: 70px;
background-color: #ccc;
position: fixed;
width: 100%;
left: 0;
top: 0;
}
#header img {
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="header">
<img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png">
</div>
Take a look on this, it will help you.
$(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");
}
}
});
});
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<header>
<div class="lrg-logo">Logo</div>
</header>
</div>
scrollTop will return a value while this line if ($(this).scrollTop()) will look for a boolean value.
So test the value in the loop condition
if ($(this).scrollTop()===someNumber) {
//rest of code
}
I'm trying to do an animation on page scroll where selected element will animate from left to right on scroll down and if back to top then animate the selected element from right to left (default position), here's what I tried
$(document).ready(function() {
$(window).scroll(function() {
var wS = $(this).scrollTop();
if (wS <= 10) {
$("#test-box").animate({
'left': 100
}, 500);
}
if (wS > 11) {
$("#test-box").animate({
'left': $('#main-container').width() - 100
}, 500);
}
});
});
#main-container {
width: 100%;
overflow: auto;
height: 500px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100;
top: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>
As you can see, on scroll down, the test box moves as I instruct but when scroll up, it does not go to the left as default, any ideas, help please?
You can add a global variable to control the animation. See the working snippet below please, where I've commented parts of the code that I added:
$(document).ready(function() {
var animated = false; //added variable to control the animation
$(window).scroll(function() {
var wS = $(this).scrollTop();
if (animated && wS <= 10) {
$("#test-box").animate({
'left': 100
}, 500);
animated = false; //animation ended
}
if (!animated && wS > 11) {
$("#test-box").animate({
'left': $('#main-container').width() - 100
}, 500);
animated = true; //it was animated
}
});
});
#main-container {
width: 100%;
overflow: auto;
height: 500px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100px;
top: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>
This should work, it also uses css for the animation.
$(document).ready(function() {
var box = document.querySelector('#test-box');
var stateClass = '-right';
window.addEventListener('scroll', function(event) {
box.classList.toggle(stateClass, document.body.scrollTop > 10);
});
});
#main-container {
width: 100%;
overflow: auto;
height: 2000px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100px;
top: 10;
transition: .5s linear;
}
#test-box.-right {
left: 100%;
transform: translateX(-100%) translateX(-100px)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>
I have this code in which I want the header to stick on page scroll and also reduce the header size. however I managed only the sticky header on scroll down. I want all this effect to get reverted when scrolling top. any solution ?
This is my code: (also on jsFiddle)
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".clearHeader").addClass("darkHeader");
}
});
.clearHeader {
height: 200px;
background-color: rgba(107, 107, 107, 0.66);
position: fixed;
top: 200;
width: 100%;
}
.darkHeader {
height: 100px;
}
.wrapper {
height: 2000px;
}
<header class="clearHeader">
</header>
<div class="wrapper">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Just add an else that removes the class:
if (scroll >= 500) {
$(".clearHeader").addClass("darkHeader");
} else { // <=== New
$(".clearHeader").removeClass("darkHeader"); // <=== bit
}
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".clearHeader").addClass("darkHeader");
} else {
$(".clearHeader").removeClass("darkHeader");
}
});
.clearHeader {
height: 200px;
background-color: rgba(107, 107, 107, 0.66);
position: fixed;
top: 200;
width: 100%;
}
.darkHeader {
height: 100px;
}
.wrapper {
height: 2000px;
}
<header class="clearHeader">
</header>
<div class="wrapper">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
However, as the scroll event happens a lot as the user scrolls, it may be appropriate to reduce the amount of work we do on scroll by maintaining a flag:
// Scoping function to avoid creating a global
(function() {
var haveDarkHeader = false;
$(window).scroll(function() {
var wantDarkHeader = $(window).scrollTop() >= 500;
if (wantDarkHeader != haveDarkHeader) {
haveDarkHeader = wantDarkHeader;
$(".clearHeader").toggleClass("darkHeader", haveDarkHeader);
}
});
})();
.clearHeader {
height: 200px;
background-color: rgba(107, 107, 107, 0.66);
position: fixed;
top: 200;
width: 100%;
}
.darkHeader {
height: 100px;
}
.wrapper {
height: 2000px;
}
<header class="clearHeader">
</header>
<div class="wrapper">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
It's more code, though, and duplicated state (we have the flag both in our JavaScript code and in the fact that the element does or doesn't have the class).
Use toggleClass() to add or remove the class based on the scroll position:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
$(".clearHeader").toggleClass("darkHeader", scroll >= 500);
});
If scroll is greater or equal to 500, the darkHeader class will be applied. Otherwise, it will be removed.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
$(".clearHeader").toggleClass("darkHeader", scroll >= 500);
});
.clearHeader {
height: 200px;
background-color: rgba(107, 107, 107, 0.66);
position: fixed;
top: 200;
width: 100%;
}
.darkHeader {
height: 100px;
}
.wrapper {
height: 2000px;
}
<header class="clearHeader">
</header>
<div class="wrapper">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Add these and see the magic
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".clearHeader").addClass("darkHeader");
}
else{
$(".clearHeader").removeClass("darkHeader");
}
});
.clearHeader{
height: 200px;
background-color: #333;
position: fixed;
top:200;
width: 100%;
}
.darkHeader {
height: 100px;
}
.wrapper {
height:2000px;
}
for more, check out my fiddle : - http://jsfiddle.net/Jinukurian7/w9EgE/5/
I need to stop #first and #second div from crossing the green line. The example will explain you everything.
http://jsfiddle.net/3QdJt/1/
It works good when I'm scrolling UP but when I go down DIVs are jumping.
HTML
<div id="first"></div>
<div id="second"></div>
<div id="donotcross"></div>
CSS
#donotcross {
position: relative;
width 500px;
height: 5px;
top: 487px;
background: green;
}
#first {
position: fixed;
width: 50px;
height: 50px;
background: red;
right: 20px;
bottom: 50%;
margin-bottom: 50px;
}
#second {
position: fixed;
width: 50px;
height: 50px;
background: yellow;
right: 20px;
bottom: 50%;
margin-bottom: -50px;
}
jQuery
$(window).scroll(function () {
windowPos = $(this).scrollTop();
asd = $('#first').offset().top;
tauto = 500 - windowPos;
if(asd <= 500) {
$('#first').css('top', tauto);
$('#second').css('top', 600 - windowPos);
}
if (asd > 500 ){
$('#first').css('top', 'auto');
$('#second').css('top', 'auto');
}
});
You need to check the windowPos variable instead of checking asd > 500. The jumping is caused by you moving the boxes to be over 500. So to avoid the jumping you might want to do this
$(window).scroll(function () {
windowPos = $(this).scrollTop();
asd = $('#first').offset().top;
tauto = 500 - windowPos;
if(asd <= 500) {
$('#first').css('top', tauto);
$('#second').css('top', 600 - windowPos);
}
if (windowPos > 500 ){
$('#first').css('top', 'auto');
$('#second').css('top', 'auto');
}
});
Edited:
To achive sticky effect, I manually calculated the boxes position instead of using top:auto
$(window).scroll(function () {
var center = $(window).height() / 2;
//the 50 is the the #first and #second offset diff divide by 2
var firstBoxTop = center - 50;
var secondBoxTop = center + 50;
var windowPos = $(this).scrollTop();
if((windowPos + firstBoxTop) < 500) {
firstBoxTop = 500 - windowPos;
}
if((windowPos + secondBoxTop) < 600) {
secondBoxTop = 600 - windowPos;
}
$('#first').css('top', firstBoxTop);
$('#second').css('top', secondBoxTop);
});
It's much effective if you put everything inside one wrapper div.
<div id="wrapper">
<div id="first"></div>
<div id="second"></div>
</div>
<div id="donotcross"></div>
CSS
body {
height: 2000px;
}
#donotcross {
position: relative;
width 500px;
height: 5px;
top: 487px;
background: green;
}
#wrapper {
position: fixed;
width: 70px;
height: 130px;
background: gray;
right: 20px;
text-align: center;
top: 50%;
}
#first {
background: red;
width: 50px;
height: 50px;
margin: 10px auto;
}
#second {
background: yellow;
width: 50px;
height: 50px;
margin: 0 auto;
}
This script will work with any height and top values of #wrapper (might be dynamic), and with any height and position of #donotcross (also might be dynamic).
var start_p = $('#wrapper').offset().top - $('#wrapper').height()/2;
$('#wrapper').css('top', $('#donotcross').offset().top + $('#donotcross').height());
$(window).scroll(function () {
var windowPos = $(this).scrollTop();
var dnc = $('#donotcross').offset().top + $('#donotcross').height() - windowPos;
if (start_p >= dnc) $('#wrapper').css('top', start_p);
else $('#wrapper').css('top', dnc);
});
http://jsfiddle.net/3QdJt/3/