I am trying to get the scroll down and up position at This Demo but as you can see it is updating the <p> element on every single pixel by pixel scroll (Up or Down). But what I need to only update the <p> on every 200 scroll until reaching the end of the div (right now the p element is updating on every single scroll).
Here is the code I have:
$(window).scroll(function () {
var height = $(window).scrollTop();
if (height > 200) {
$('p').html(height);
}
});
div {
height:1080px;
}
p {
position:fixed;
top:0;
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<p></p>
<div>
<h3> Hello Scroll!</h3>
</div>
How can I fix this?
var a=0;
$(window).scroll(function () {
var height = $(window).scrollTop();
if (height-a<200){
if (height-a<-200){
$('p').html(a);
a = parseInt(height/100) *100;
}
}else{
$('p').html(a);
a = parseInt(height/100)*100;
}
});
div {
height:1080px;
}
p {
position:fixed;
top:0;
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<p></p>
<div>
<h3> Hello Scroll!</h3>
</div>
Related
I have a problem in animation in onscroll event.
The if condition works very well when I scroll down and div shows without any problem, but when I scroll up, the else condition does not work, so the div doesn't hide and it is still shown.
This is the code:
$(function () {
'use strict';
var myDiv1 = $('div'),
div1Top = (myDiv1.offset().top) / 2;
$(window).on('scroll', function () {
var docScrollTop = document.documentElement.scrollTop;
if (docScrollTop >= div1Top) {
$('div').animate({opacity: '1'}, 800);
} else {
$('div').css('opacity', '0');
}
});
});
This might not be exactly what you're trying to do, but I think it's in the right ballpark:
<html>
<style>
div {
width: 500px;
height: 500px;
}
.animated_div {
background-color: green;
position: absolute;
top: 2000px;
opacity: 0;
}
.placeholder {
position: absolute;
top:4000px;
}
</style>
<body>
<div class="animated_div"></div> <!--The div that will actually be animated-->
<div class="placeholder"></div> <!--This is just something below the animated DIV, so that you can scroll below the animated DIV -->
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
'use strict';
var myDiv1 = $('.animated_div');
// Start animating the div relative to its middle
var div1Middle = myDiv1.offset().top + myDiv1.height() / 2;
// Keep track of whether the animated_div is displayed or not
var myDiv1Shown = false;
$(window).on('scroll', function () {
var docScrollTop = $(window).scrollTop(); // Top of the window in page coordinates
var docScrollBottom = docScrollTop+$(window).height(); // Bottom of the window in page coordinates
if (div1Middle > docScrollTop && div1Middle < docScrollBottom && !myDiv1Shown) {
// The div middle is within view and it's not already shown, so we need to show it
myDiv1Shown = true;
myDiv1.animate({opacity: '1'}, 800);
} else if ((div1Middle > docScrollBottom || div1Middle < docScrollTop) && myDiv1Shown) {
// The div middle is out of view and it's shown, so we need to hide it
myDiv1Shown = false;
myDiv1.animate({opacity: '0'}, 800);
}
});
});
</script>
</html>
This changes the div opacity to 1 when it's in view and changes it to 0 when it's out of view. It's considered in-view if its vertical middle is in view.
If what you want to do is essentially fade-in the div when the user scrolls it into view and then fade-out the div when the user scrolls it out of view, you might consider this as an alternative:
<html>
<style>
div {
width: 500px;
height: 500px;
}
.animated_div {
background-color: green;
position: absolute;
top: 2000px;
opacity: 0;
}
.placeholder {
position: absolute;
top:4000px;
}
</style>
<body>
<div class="animated_div"></div> <!--The div that will actually be animated-->
<div class="placeholder"></div> <!--This is just something below the animated DIV, so that you can scroll below the animated DIV -->
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
'use strict';
var myDiv1 = $('.animated_div');
var div1Top = myDiv1.offset().top;
var div1Height = myDiv1.height();
var div1Bottom = div1Top + div1Height;
$(window).on('scroll', function () {
var docScrollTop = $(window).scrollTop(); // Top of the window in page coordinates
var docScrollBottom = docScrollTop+$(window).height(); // Bottom of the window in page coordinates
// Calculate fraction of div on page
var topOffPage = Math.max(0, docScrollTop - div1Top);
var bottomOffPage = Math.max(0, div1Bottom - docScrollBottom);
var fractionOnPage = Math.max(0, div1Height - topOffPage - bottomOffPage)/div1Height;
myDiv1.css('opacity', fractionOnPage);
});
});
</script>
</html>
The snippet immediately above sets the opacity of the div to be the fraction of it that is in view (considering only the vertical dimension). So if the entire DIV is on-screen, it's fully opaque. If only half of it is onscreen (with half of it either above the scroll top or below the scroll bottom), then the opacity is 0.5, and so on. If the div is large relative to the screen, then this could cause problems. For instance, if you have a 1000px div, and people are viewing the page with a viewport of height 500px, then the div will only ever be 50% opaque at most. But you can adapt it as necessary to fit your circumstances.
I've made a header is fixed at the top with a fixed position, in which there is a logo and menu in the header. what i want to ask how to hide the logo when a user scrolls to the middle. and the menu shifts up replacing the logo?
Here is my HTML/CSS:
#header {
position:fixed;
width:100%;
}
.logo {
background:#ccc;
}
.logo h2 {
margin:0px;
}
.menu {
background:red;
}
#konten {
padding-top:50px;
}
<div id="header">
<div class="logo">
<h2>Example WEb</h2>
</div>
<div class="menu">HOMEAboutContact
</div>
</div>
<div id="konten">
1abcdefghiabcdefghia
<br>bcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcdefghiabc
<br>defghiabcdefghiabcdefghiabcdefghiabcdefghiab
<br>cdefghiabcdefghiabcdefghiabcdefghiabc
<br>defghiabcdefghiabcdefghiabcdefghiabcdefghia
<br>defghiabcdefghiab
<br>cdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcdef
<br>ghiabcdefghiabcdefghiabcdefghi
<br>abcdefghiabcdefghiabcdefghiabcdefghiabcdef
<br>ghiabcdefghiabcdefghiabcdefghiabcdef
<br>ghiabcdefghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefgh
<br>iabcdefghiabcdefghiabcdefghi
<br>abcdefghiabcdefghiabcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcdefgh
<br>iabcdefghiabcdefghiabc
<br>defghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabc
<br>defghiabcdefghiabc
<br>defghiabcdefghiabcdefg
<br>hiabcdefghiabcde
<br>fghiabcdefghiabcdef
<br>ghiabcdefghiabcdefghi
<br>abcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiab
<br>cdefg
<br>hiabcdefghiabcdefghia
<br>bcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabcdefghiab
<br>cdefghiabcdefghiabcdefghiabcdefghiabcdefghiab
<br>cdefghiabcdefghiabcdefghia
<br>bcdefghiabcde
<br>fghiabcdefghiabcdefghiabcde
<br>fghiabcdefghiabcdefghiabcdef
<br>ghiabcdefghiabcde
<br>fghiabcdefghiabcdefghiabcdefgh
<br>iabcdefghiabcdefghiabcdefghi
<br>abcdefghiabcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabc
<br>defghiabcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabcde
<br>fghiabcdefghiabcdefghiabc
<br>defghiabcdefghiabcdefghia
<br>bcdefghiabcdefghiabcdefghiabcde
<br>fghiabcdefghiabcdefghi
</div>
<div id="footer">
</div>
External JSFiddle
while you tagged Jquery .. can be done with jquery
$(document).ready(function(){
$(window).on('scroll',function(){
var windowScroll = $(this).scrollTop();
if(windowScroll >= ($(this).height())/2){
$('.logo').slideUp(500);
}else{
$('.logo').slideDown(500);
}
});
});
JsFIDDLE
I hope this is what you want!!
$(window).scroll(function() {
if ($(this).scrollTop() > 200) { //use `this`, not `document`
$('.logo').css({
'display': 'none'
});
}
else
{
$('.logo').css({
'display': 'block'
});
}
});
Demo Here
Change your CSS of header to below so that it remains at top
#header {
position:fixed;
width:100%;
top:0px;
}
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);
}
});
What I want to make is an horizontally scrolling DIV "list" just like pretty much every big web site in the internet(netflix for example).
I tried to make it using a main DIV which would be some kind of container, a 2nd div which holds all the content and is inside the first DIV and a lot of DIVs, one for each content module, that go inside the 2nd div.
the parts of the 2nd DIV that overflow the main one should hide, and the content could be shown by moving it(the 2nd DIV).
this is the best I could come up with, but it still doesn't work jsfiddle
This is my HTML
<button onmouseover="left=1" onmouseout="left=0">
<</button>
<div class="container">
<div id="filler" style="left:0px">
<div class="module" style="background:coral;">testing</div>
<div class="module" style="background:lightblue;">testing</div>
<div class="module" style="background:lightgreen;">testing</div>
<div class="module" style="background:salmon;">testing</div>
<div class="module" style="background:lightyellow;">testing</div>
</div>
</div>
<button onmouseover="right=1" onmouseout="right=0">></button>
CSS
.container {
height:50px;
width:200px;
overflow:hidden;
}
#filler {
height:50px;
width:250px;
position:relative;
border-radius:10px;
background:crimson;
}
.module {
width:50px;
height:50px;
border-radius:5px;
float:left;
line-height:50px;
text-align:center;
}
JavaScript:
var feft = 0
//feft stands for filler left
var right = 0
var left = 0
var loaded = 0
window.onload=function(){
loaded=1
}
function move() {
if(loaded == 1){
if (left == 1 && feft <= 250) {
//left == 1 && feft <= filler width
document.getElementById("filler").style.left = feft + 1
}
if (right == 1 && feft >= 0) {
//right == 1 && feft >= 0
document.getElementById("filler").style.left = feft - 1
} //these IFs tests if the filler should move
feft = document.getElementById("filler").style.left
//this sets the feft variable to what it needs to be for the next run of the function
}}
window.setInterval(move(), 100)
I have made a fiddle for you.
demo
HTML code
<button onmouseover="left=1" onClick="move(-1)"><</button>
<div class="container">
<div id="filler" style="left:0px">
<div class="module" style="background:coral;">testing</div>
<div class="module" style="background:lightblue;">testing</div>
<div class="module" style="background:lightgreen;">testing</div>
<div class="module" style="background:salmon;">testing</div>
<div class="module" style="background:lightyellow;">testing</div>
</div>
</div>
<button onmouseover="right=1" onClick="move(1)">></button>
JS Code
var position = 0;
var moduleCount = document.querySelector(".module").length;
window.move = function(number) {
if (number) {
position += number;
if (number == 0 || number > moduleCount) {
position = 0;
}
} else {
if (position <= 4) {
position++;
} else {
position = 0;
}
}
moduleOffset = document.querySelector(".module").offsetWidth;
filler = document.querySelector("#filler");
filler.style.left = -( position* moduleOffset) + "px";
}
setInterval(window.move, 3000);
What you want to do is called "Carousel". I suggest to use bootstrap for example and implement it then in your site.
http://getbootstrap.com/javascript/#carousel
Try adding overflow: scroll as a CSS property to your container div.
I have this HTML code
HTML
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
and this CSS code
CSS
#d1, #d2, #d3, #d4, #d5{ float:left; height:500px; width:200px; display:none;}
Script:
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($("#d2").height() <= ($(window).height() + $(window).scrollTop())) {
$("#d1").css("display","block");
}else {
$("#d1").css("display","none");
}
});
});
</script>
Question:
When I scroll page down each div display one by one.
When scroller reach at "#d2" the div "#d1" should be displayed, When scroller reach at "#d3" div "#d2" should be displayed.... and when scroller reach at the end of page "#d5" should be displayed.
You may try this similar case:
http://jsfiddle.net/j7r27/
$(window).scroll(function() {
$("div").each( function() {
if( $(window).scrollTop() > $(this).offset().top - 100 ) {
$(this).css('opacity',1);
} else {
$(this).css('opacity',0);
}
});
});