I'm trying create an alert saying "True" when the user scrolls past the "#topp" element, yet it isn't doing anything, the element is just supposed to be a tiny div at the top of the page.
HTML
<div id="topp"></div>
jQuery
$(window).scroll(function() {
var vpH = $(window).height(),
st = $(window).scrollTop(),
y = $('#topp').offset().top;
if(y > (st + vpH)) alert('true');
});
Why do you need the window height? If you have the top and the scroll to top variables then theirs no need for the height of the window.
$(document).scroll(function()
{
var scrollTop = $(window).scrollTop();
var toppOffset = $('#topp').offset().top;
if(toppOffset > scrollTop)
alert('true');
});
A clearer representation http://jsfiddle.net/zDpw3/1/
Related
I want to stop scroll after a dynamic div reaches its end. This div will be holding dynamic content so the size never stays the same. I know how to lock in position when scroll hits a pre-defined height, but not sure how to do it when the hight is constantly changing. here's what i'm using for my standard locking scroll when it hits specific point:
var profile_rc = $("#profile-rc");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 285) {
profile_rc.addClass("p-right-column");
} else {
profile_rc.removeClass("p-right-column");
}
});
Looks like you are using jQuery, the following 2 examples might help.
Detecting dynamic height of screen
<script>
$(function(){
var windowHeight = $(window).height();
$(window).resize(function() {
windowHeight = $(window).height();
console.log(windowHeight);
});
});
<script>
Detecting dynamic height of a div
<script>
$(function(){
var divHeight = $('#your-div-id').css("height");
$( window ).on("resize", function() {
divHeight = $('#your-div-id').css("height");
console.log(divHeight);
});
});
</script>
I got it to work doing this:
$(window).scroll(function() {
var divHeight = $('#farleft-cont').outerheight(true);
var ycbc = $('#target-div');
var scroll = $(window).scrollTop();
if (scroll >= divHeight) {
ycbc.addClass("target-div-fixed");
} else {
ycbc.removeClass("target-div-fixed");
}
});
I have a problem with my jQuery plugin, I want to display footer in specific way right before end of page. For this I get actual bottom position and compare it with height of entire body.
But there is a problem jQuery function height() return bad value. For example I know that site has height of 5515px but function returns to me a value: 8142px
I use the plugin mCustomScrollbar in few places on page, and I think that it may cause the problem. I can't disable it, because page has elements which require it to look good.
My code:
(function($){
$.fn.scrollingElements = function(){
var height = $(window).height();
var max_height = $(document).height();
var prev_top = $(window).scrollTop();
var prev_bottom = top + height;
$(window).scroll(function(){
var top = $(window).scrollTop();
var bottom = top + height;
console.log(max_height, bottom);
if(prev_top < height && top > height){
// console.log('show header', 'show sticky', 'show footer small');
}
if(prev_top > height && top < height){
// console.log('hide header', 'hide sticky', 'hide footer');
}
if(prev_top < 2*height && top > 2*height){
// console.log('show sroll top');
}
if(prev_top > 2*height && top < 2*height){
// console.log('hide scroll top');
}
if(prev_bottom < max_height - 100 && bottom > max_height - 100){
// console.log('show footer large');
}
if(prev_bottom > max_height - 100 && bottom < max_height - 100){
// console.log('show footer small');
}
prev_top = top;
prev_bottom = bottom;
});
$(window).resize(function(){
height = $(window).height();
});
}
})(jQuery);
Answering to Tommy Riordan:
changing $(document).height() to document.body.clientHeight didn't work still getting bad results. Tried using $('body').height() with same effect.
Please use
document
instead of window
for example :
$(window).resize(function(){
height = $(document).height();
});
I'm looking to find the HTML element or content which occupies the pixel position on a page. I am using currently using jQuery to find the scrollTop() position:
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
console.log(scroll);
// Do something
});
to understand the $(window).scrollTop() position, but I'd like to know what occupies the space. E.g., if a user scrolls to '300', what HTML element or content is there?
Scrolltop code from How to detect scroll position of page using jQuery
function checkElement(el){
var windowHeight = $(window).height();
var scroll = $(window).scrollTop();
var elementPosition = el.height() + el.position().top;
if (elementPosition > scroll && elementPosition < windowHeight + scroll){
return true;
}
return false;
}
I want scroll page content on mouse scroll.
I have 5 images in page, at a time i want to show one image per screen.
If i scroll down second image showed be shown, if i scroll up previous image should be shown. Like wise until the last image.I have tried an example but have no idea how achieve this.
JavaScript:
var winHeight = $(window).height();
var prevHeight = 0;
var scrollCount = 0;
var docHeight = $(document).height();
$(document).ready(function(){
$(window).scroll(function(e){
console.log("in scroll top");
var top = $(window).scrollTop();
console.log("top - "+top);
if(top !=0 && top != docHeight){
if(top > prevHeight){
scrollCount = scrollCount+1;
}else{
scrollCount = scrollCount-1;
}
console.log("scroll count="+scrollCount);
$(window).scrollTop(winHeight*scrollCount);
prevHeight = top;
if(scrollCount < 0){
scrollCount = 0;
}
e.preventDefault();
}
});
My example is here http://jsbin.com/iwOsiFIY/1/
Just set the margins to what you want them to be for each image in CSS. Or a workaround is adding a bunch of "p" tags in HTML without actually adding a paragraph, The first way is the best. You might also need some JavaScript for resizing.
Using jQuery, how do I determine the height/distance between the very top of the browser window to the bottom of a div, such as a header. I'm using the following code:
$(window).resize(function() {
$totalHeight = $(window).height();
$headerHeight = $('header').height();
$('#portfolio-info').css('height',($totalHeight - $headerHeight - 105) + 'px');
});
And I want to make sure that $headerHeight isn't always the same value, as you scroll away from the header it should decrease all the way down to zero.
Thanks!
This should work out for you.
$(window).resize(function() {
var top = $(this).scrollTop(),
bottomDiv = $('div').offset().top + $('div')[0].offsetHeight,
distance = Math.max(0, (top - bottomDiv) * -1);
});