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);
}
});
});
Related
I need to set a easeOutBounce for a webpage back-to-top button .
I have below code for .scrollTop but unable to add
{
duration: 2000,
easing: "easeOutBounce"
}
Existing .js:
$(document).ready(function() {
// Show or hide the sticky footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('.back-to-top').fadeIn(200);
} else {
$('.back-to-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.back-to-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 300);
});
});
Like this:
$(document).ready(function() {
// Show or hide the sticky footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('.back-to-top').fadeIn(200);
} else {
$('.back-to-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.back-to-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 900, 'easeOutElastic');
});
});
.wrap{height:2000px;}
.in1, .in2{height:250px;margin-top:50px;}
.in1 {border:1px solid blue;}
.in2 {border:1px solid red;}
button{margin-top:50px;font-size:3rem;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="wrap">
<div class="in1"> Scroll down</div>
<div class="in1">Down a bit more</div>
<button class="back-to-top">Back To Top</button>
</div>
Or, like this:
$(document).ready(function() {
// Show or hide the sticky footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('.back-to-top').fadeIn(200);
} else {
$('.back-to-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.back-to-top').click(function(event) {
event.preventDefault();
$('html, body').animate(
{scrollTop: 0},
{
easing: 'easeOutElastic',
duration: 1500
}
);
});
});
.wrap{height:2000px;}
.in1, .in2{height:250px;margin-top:50px;}
.in1 {border:1px solid blue;}
.in2 {border:1px solid red;}
button{margin-top:50px;font-size:3rem;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="wrap">
<div class="in1"> Scroll down</div>
<div class="in1">Down a bit more</div>
<button class="back-to-top">Back To Top</button>
</div>
Useful sites:
http://easings.net/ (usage examples at bottom)
http://www.learningjquery.com/2009/02/quick-tip-add-easing-to-your-animations
Install just the easings to get around requirement for jQueryUI
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);
}
});
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>
I'm trying to make a website scroll divs. When a visiter wants to scroll it should automatically go to the next or previous div.
Below you can see how my html looks like.
<body>
<header>
</header>
<div id="content">
<div id="contentv1">
</div>
<div id="contentv2">
</div>
<div id="contentv2">
</div>
<div id="contentv2">
</div>
<div id="contentv3">
</div>
</div>
</body>
I'm trying it with the following code:
(function() {
var scrollTo = function(element) {
$('html, body').animate({
scrollTop: element.offset().top
}, 500);
}
$('body').mousewheel(function(event) {
event.preventDefault();
var $current = $('#content > .current');
if ($current.index() != $('#content > div').length - 1) {
$current.removeClass('current').next().addClass('current');
scrollTo($current.next());
}
});
$('body').mousewheel(function(event) {
event.preventDefault();
var $current = $('#content > .current');
if (!$current.index() == 0) {
$current.removeClass('current').prev().addClass('current');
scrollTo($current.prev());
}
});
})();
The header has an height of 10% and sticks to the top. The content divs have a height of 90%. So when scrolled the top of the content divs should aline with the bottom of the header.
Can anyone help me into the right direction?