simple question, easy points, cannot find the answer in SO. The javascript function below alerts when a user scrolls to the bottom of a div. I have many divs, but I only want the alert to run when a div id=imageloc is scrolled.
$(window).scroll( function() {
if ( document.documentElement.clientHeight + $( document ).scrollTop() >= document.body.offsetHeight ) {
if (this.id == "imageloc" ) {
alert("bottom of the page.");
}
}
});
The javascript function below alerts when a user scrolls to the
bottom of a div. I have many divs, but I only want the alert to run
when a div id=imageloc is scrolled.
Maybe I have misunderstood, but it's phrased like you have many scrollable divs and want to do something if one of them is scrolled to the bottom. Then you should listen to scroll event on this particular div:
$("#imageloc").scroll( function(e) {
if ( this.scrollTop >= this.scrollHeight - this.offsetHeight ) {
console.log( 'bottom' )
}
});
http://jsfiddle.net/aheh5/
If you want to do something when the document has been scrolled past the bottom of a particular div try this: http://jsfiddle.net/aheh5/1/ (it will, however, trigger every time the user scrolls the window and #imageloc is above the viewport).
Use like this
$(window).scroll(function() {
var winTop = $(this).scrollTop();
var $divs = $('div');
var top = $.grep($divs, function(item) {
return $(item).position().top <= winTop;
});
alert($(top).attr('id'));
});
You can try something like this,
var imgLocTop = $('#imageloc').offset().top ;
var $window = $(window);
var limit = Math.abs($window.height() - imgLocTop);
$window.scroll( function() {
if($window.scrollTop() >= limit) {
alert('Reached the required div');
}
});
Demo
Related
I'm trying to replace the logo image in heading of the page when scrolling, with fade effect. It starts working in the correct way, and the image replacement is done but while you continue scrolling down the site, the new logo continues fading.
Here's my code:
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 100) {
$(".navbar-fixed-top").addClass("nav-scrolled");
$('#logo').fadeOut('',function(){
$(this).attr('src','Template/images/logo-scrolled.png').fadeIn();
});
}
else{
$(".navbar-fixed-top").removeClass("nav-scrolled");
$('#logo').fadeOut('',function(){
$(this).attr('src','Template/images/logo.png');
});
}
})
})
You can see it in www.ultramarinosvillena.com
How could I fix it?
EDIT: sorry, my mistake - first thinking then posting. ;) One of the conditional statements was triggered with each scroll event - now it will only be triggered once, when the scrolling point is reached.
You should check the nav-scrolled class:
$(document).ready(function(){
var $navbar = $(".navbar-fixed-top"),
$logo = $("#logo"),
currentScroll;
$(window).on('scroll', function(){
currentScroll = $(window).scrollTop();
if ( currentScroll > 100 && !($navbar.hasClass('nav-scrolled')) ) {
$navbar.addClass("nav-scrolled");
$logo.fadeOut('',function(){
$(this).attr('src','Template/images/logo-scrolled.png').fadeIn();
});
} else if ( currentScroll < 100 && $navbar.hasClass('nav-scrolled')) {
$navbar.removeClass("nav-scrolled");
$logo.fadeOut('',function(){
$(this).attr('src','Template/images/logo.png').fadeIn();
});
}
});
});
I have a html div element that scrolls with the page but I would like it to become fixed once it reaches 50px from the top of the screen...
How is this done?
My div id is #box
Thanks!
-Ina
If you want it to be fixed at the top of the page at some distance from the top, you can check the top offset of the element and change the class when it reach the distance you want.
Here is the jquery code for your reference
jQuery(document).scroll(function() {
var documentTop = jQuery(document).scrollTop();
console.log('this is current top of your document' + documentTop );
//box top is 891
if (documentTop > 841) {
//change the value of the css at this point
jQuery("#box").addClass("stayfix");
}
else
{
jQuery("#box").removeClass("stayfix");
}
});
You need to be more specific about what have you done so far. For eg, how did you make the div element to scrolls inside the page. using css or js/jquery animation features?That will help us to give more specific answer.
**Edited According to your fiddle.
They are right, this question is duplicate. Here is a code I made with answers from the forum.
var box_top = $("#box").offset().top;
$(window).scroll(function (event) {
if ($(window).scrollTop() >= (box_top - 50)) {
$("#box").css({position:"fixed",top:"50px"});
} else {
$("#box").css({position:"relative"});
}
});
Hope it helps anyway.
https://jsfiddle.net/ay54msd5/1/
Try something like this. It's a solution using jquery (hopefully not a problem) that checks the scrollHeight of the page every time the page scrolls. If the scrollHeight is greater than a certain threshold, the element becomes fixed. If not, the element is positioned relatively (but you can do whatever you want in that case.
$(document).ready(function() {
var navFixed = false;
var $box = $("#box");
var topHeight = 50;
$(document).scroll(function() {
if ($(document).scrollTop() >= topHeight && !navFixed) {
$box.css("position", "fixed");
navFixed = true;
}
else if ($(document).scrollTop() < topHeight && navFixed) {
$box.css("position", "relative");
navFixed = false;
}
});
});
You would have to write some additional CSS targeting the #box element that tells it what coordinates you'd like it to be fixed to.
So I am using jQuery scrollTop() to change the CSS class of a specific element based on how far down the page you one (one page website). However, this requires me to adjust the jQuery when the sections of the page grow larger in height.
Is there any good way to change the CSS class based on the current ID you are at in the page? or does it need to be based on how far down you are in terms of pixels?
This is the code I am currently using:
<script>
$(window).bind('scroll', function() {
if($(this).scrollTop()>= 0 && $(this).scrollTop() < 550){
$('.homeLink').addClass('selected');
}
else {
$('.homeLink').removeClass('selected');
}
});
$(window).bind('scroll', function() {
if($(this).scrollTop()>= 575 && $(this).scrollTop() < 1900){
$('.photosLink').addClass('selected');
}
else {
$('.photosLink').removeClass('selected');
}
});
$(window).bind('scroll', function() {
if($(this).scrollTop()>= 1950 && $(this).scrollTop() < 3000){
$('.aboutLink').addClass('selected');
}
else {
$('.aboutLink').removeClass('selected');
}
});
</script>
It would be really cool to have it just change based on the ID it's at. Any ideas?
You could get the position of a target element with a certain ID, and change the behavior of the window scroll function based on whether you had reached that position yet.
// in window scroll function do this
var pos = $(window).scrollTop();
var elemTop = $('#someElement').position().top;
if (pos > elemTop) {
doSomething();
}
For example, see this fiddle
I want to slide a DIV with contents out -- within a defined page area; within a long vertical 1 page website.
I have it setup with 6 DIV blocks;
Block 5 I have a CSS3 / jQuery animation wrapped in a DIV -- that I would like to SLIDE out into the page (from either left or right) with jQuery.
I'm thinking determining the point of slide from a defined anchor point; put within the the mark-up of the area that I'd like the DIV to slide into.
How could I write this;
..something like -- if anchor tag; SlideIn?
Something like;
slideLeftHide: function() {
return this.each(function() {
$(this).hide('slide', {direction: 'left'}, 1000);
});
http://jsfiddle.net/SZ8uH/2/
Try something like this:
var animInTriggeredAt = $("a#slidein").offset().top; //show when the anchor comes on stage
var animOutTriggeredAt = animInTriggeredAt + $(window).height(); //hide when it leaves the stage
var animActive = false;
// handle scroll event
$(window).scroll(checkScrollCues);
function checkScrollCues(){
var scrollY = $(window).scrollTop();
if (scrollY > animInTriggeredAt && scrollY < animOutTriggeredAt && !animActive){
animActive = true;
$("#myAnimatedDiv").show(); //put whatever animation code you want in here
} else if ((scrollY < animInTriggeredAt || scrollY > animOutTriggeredAt) && animActive){
animActive = false;
$("#myAnimatedDiv").hide(); //put whatever animation code you want in here
}
}
How does one make an html element not become fixed until it has been scrolled to? So while the user is scrolling it will be in normal position, but it won't go out of the screen after the user has scrolled past it?
Attach a listener to the onscroll event, and if the scrollTop is greater than the element's Y position, set it to position: fixed.
I've used this code before:
http://www.webdeveloperjuice.com/2011/08/07/how-to-fix-element-position-after-some-scroll-using-jquery/
(function($){
$.fn.scrollFixed = function(params){
params = $.extend( {appearAfterDiv: 0, hideBeforeDiv: 0}, params);
var element = $(this);
if(params.appearAfterDiv)
var distanceTop = element.offset().top + $(params.appearAfterDiv).outerHeight(true) + element.outerHeight(true);
else
var distanceTop = element.offset().top;
if(params.hideBeforeDiv)
var bottom = $(params.hideBeforeDiv).offset().top - element.outerHeight(true) - 10;
else
var bottom = 200000;
$(window).scroll(function(){
if( $(window).scrollTop() > distanceTop && $(window).scrollTop() < bottom )
element.css({'position':'fixed', 'top':'5px'});
else
element.css({'position':'static'});
});
};
})(jQuery);
Then just call the elements:
$(document).ready( function(){
$("#scrollingDiv").scrollFixed({appearAfterDiv:'.sidebar p', hideBeforeDiv:'.footer'});
$("#scrollingDiv1").scrollFixed({hideBeforeDiv:'.footer'});
});
Have a look at the jQuery Scrollfollow plugin. I have used this to achieve that effect conveniently.
You simply call it on the element that you want to stay in view:
<script type="text/javascript">
$( '#example' ).scrollFollow();
</script>
Easing, position and other parameters can be configured.