I'm building a HTML website where I would like to load an iframe if the user scrolled nearly to the bottom.
(The iframe contains a lot of JavaScript heavy follow me widgets that are slowing down the website if they would be loaded directly)
How can that be done?
Thanks. Uli
use .scroll()
Like so:
$(window).scroll(function() {
if(($(window).scrollTop() + $(window).height()) == $(document).height()) {
$('div').append('<iframe></iframe>');
}
});
Here's a fiddle with an example - http://jsfiddle.net/vRLsg/
You can calculate the position when you scroll
$('body').scroll(function(){
if ($('body').scrollTop() == $('body').height()){
loadIframe();
}
});
Have a look at this jsfiddle - I guess it does what you need.
Related
I am trying to detect when the browser has scrolled all the way to the end of a div, to trigger an action when that occurs - add a class to the div divToCheckEndOf
I found a jQuery solution that checks for scrollTop and height of the window and document.
$(window).scroll(function () {
if ($(window).scrollTop() >= (($(document).height() - $(window).height()) - divToCheckEndOf.innerHeight())) {
divToCheckEndOf.addClass('abs');
} else {
divToCheckEndOf.removeClass('abs');
}
});
This code works fine on large desktop resolutions, but it fails on laptop resolutions and mobile devices.
Any feedback appreciated.
Thanks!
Not sure what the issue was here, but I ended up using this good old jquery solution:
if ($(window).scrollTop() > section.height() {
//we are underneath the section
}
I tried to search it over SO and there are many question asked like this but non of them has the answer. I want to implement a Scrollable Div to load dynamic content without any plugin. I am implementing JQuery itself but do not want to add other plugin.
I know how to do this on whole document as most of the questions suggest
$(window).scroll(function()
{
if($(window).scrollTop() + $(window).height() > $(document).height() - 100)
{
}
});
but now how can I implement this on a single div? So, that when I scroll my div at bottom then it loads content with ajax?
Try this:
$('#yourdiv').bind('scroll', function(){
if ($(this).scrollTop() +$(this).innerHeight()>= $(this)[0].scrollHeight)
{
$('#result').append('Bottom of your div');
}
});
I am currently using some js to detect when I get to the bottom of the page on a site I am developing. I am currently testing the js out with this script here:
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height() ){
console.log('you are at the bottom');
}
});
My issue here is that it only fires when I get to the top of my scrolled page not the bottom which was not the desired effect I wanted.
Can anyone see why its not working?
Thanks,
Mark
Because scrollTop is the top of your window, and when you reach the bottom of the page, this is not inline with the bottom.
You need to account for the window height.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});
I have a div that is fixed position that I want hidden once the page is scrolled to a certain position. Is there any way to do this with jQuery/Javascript?
Yep, something like this should do the trick:
var max_scroll = 300;
$(document).scroll(function(){
if($(this).scrollTop() >= max_scroll)
{
$('#my_div').fadeOut();
}
});
$(document).scroll(function(){
if($(document).scrollTop()>100){
$("#myElement").hide();
}
}
edit: Oop, I see someone already posted a working solution,
The question is confusing, I know, but I just couldn't put it any other way.
Here's the url: Configure - Apple Store (U.S.)
The 'Summary' box on the side is aligned below the sub-header (with pictures of all the Mac models) and is at the same height as the content block. If you scroll the page up, the whole page goes up as expected. However, the moment the content block scrolls off the viewable area of the browser window, the summary block anchor itself to the top level and stays there even if you scroll to the far end of the page.
What is this behaviour called and what's the simplest, cleanest way to achieve it? I'd prefer a jQuery plugin and/or code snippet instead of plain JavaScript.
You can do something like this:
$(function () {
var $el = $('.fixedElement'),
originalTop = $el.offset().top; // store original top position
$(window).scroll(function(e){
if ($(this).scrollTop() > originalTop ){
$el.css({'position': 'fixed', 'top': '0px'});
} else {
$el.css({'position': 'absolute', 'top': originalTop});
}
});
});
Check an example here.
I think you are looking for
jquery-scroll-follow
plugin