this function is supoused to work in iphone,
$(document).ready(function() {
$('#head').css('position','fixed');
window.onscroll = function() {
document.getElementById('head').style.top =
(window.pageYOffset + window.innerHeight + 25) + 'px';
// alert((window.pageYOffset + window.innerHeight - 25) + 'px');
};
});
but it's supoused to keep the div (25px) at the bottom of the page, i need it on top of the page no matter how much i scroll
i'm tring like this
$(document).ready(function() {
$('#head').css('position','fixed');
var height = $('#head').height();
window.onscroll = function() {
document.getElementById('head').style.top =
(window.pageYOffset) - height + 'px';
// alert(window.pageYOffset); alert(window.innerHeight);
};
});
but it seems that the #head div is not following properly the scroll (it seems like it bounces), any idea what i'm missing??
Position fixed do not work in iPhone. So it is bound to bounce whenever you scroll the page until the scroll handler set its new position.
$(document).ready(function() {
$('#head').css('position','absolute');
$(window).scroll(function() {
$('#head').css({
top: window.pageYOffset
});
});
});
Try a little more jQuery:
window.onscroll = function() { $('#head').offset(0,0); }
Related
I have 2 full height divs. When you scroll down the page the one div scrolls up and the other scrolls in an opposite direction. This works great.
I'm trying to keep this effect but put normal full width content underneath it whilst trying to maintain natural scrolling. So I'd like to keep the alternate scrolling effect but when I get to the bottom of the last div that uses this effect I would like to continue scrolling normally to see normal content underneath it.
Here's my jsFiddle, currently its floating over the effect I refer to: http://jsfiddle.net/u9apC/116/ and the JS is pasted below for reference:
(function ($) {
var top = 0;
$(document).ready(function () {
var contentHeight = $('.right').height(),
contents = $('.right > .content').length;
top = (0 - (contentHeight * (contents - 1)));
$('.right').css('top', top + 'px');
});
$(window).resize(function () {
var contentHeight = $('.right').height(),
contents = $('.right > .content').length;
top = (0 - (contentHeight * (contents - 1)));
$('.right').css('top', (top + $(window).scrollTop()) + 'px');
});
$(window).scroll(function () {
$('.right').css('top', (top + $(window).scrollTop()) + 'px');
});
})(jQuery);
EDIT
Here's a illustration of what I want:
I hope this is what you're after - it's a little hard to visualise from the description.
There are a couple of tricks to get this working:
Reverse the scroll direction when the right col top goes positive
Ensure the .row div has a top margin sufficient to push it down to the bottom of the left col.
(function ($) {
var top = 0;
var contentHeight = 0;
$(document).ready(function () {
calcContentHeight();
});
$(window).resize(function () {
calcContentHeight();
});
$(window).scroll(function () {
setRightTop();
});
function calcContentHeight() {
var contents = $('.right > .content').length - 1;
contentHeight = $('.right').height() * contents;
top = 0 - contentHeight;
setRightTop();
}
function setRightTop() {
var rightTop = top + $(window).scrollTop();
//1. don't allow right col top to go positive
if(rightTop > 0) rightTop = 0 - rightTop;
$('.right').css('top', rightTop + 'px');
//2. Ensure .row has sufficient top margin
$('.row').css('margin-top', contentHeight + 'px');
}
})(jQuery);
See updated JSFiddle here: http://jsfiddle.net/u9apC/126/
I've also refactored your code a little to reduce duplication.
You just need to make height of the div.body equal to total height of elements within it. Either by js or css.
I have a page with a simple div. If the div is at the top of the page, the background image (a very long vertical wallpaper) should also only be displaying the top section. If we scroll all the way down, then at the last area way at the bottom, the bottom of the background will show. The effect is that it's like a parallax where the scrolling of the content and background image occur in tandem and are scaled to each other.
How would I do this?
Update: My attempt is something like this:
function setupMainContent(){
$("#programming").delay(1000).fadeIn(1000, function(){
$(window).scroll(function(){
var current = $(window).scrollTop();
var bottom = $(document).height() - $(window).height();
var scale = 100*(current/bottom);
$('body').css({
'background-position':scale+'%'
});
});
}
I don't really know how to work with variables within quotes however.
Update: I got it to work using this:
function setupMainContent(){
$("#programming").delay(1000).fadeIn(1000, function(){
$(window).scroll(function(){
var current = $(window).scrollTop();
var bottom = $(document).height() - $(window).height();
var scale = 100*(current/bottom) + "%";
document.body.style.backgroundPosition = "center " + scale;
});
});
}
But there seems to be very bad impact on performance. Is there any way to make it more responsive and faster?
CSS:
background-attachment: fixed;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
This worked for me:
function setupMainContent(){
$("#programming").delay(1000).fadeIn(1000, function(){
$(window).scroll(function(){
var current = $(window).scrollTop();
var bottom = $(document).height() - $(window).height();
var scale = 100*(current/bottom) + "%";
document.body.style.backgroundPosition = "center " + scale;
});
*/
});
}
Is there a way to detect the pop up page stretching vertically?
function ResizeContent(content) {
$(window).resize(function () {
if (window.parent.document.getElementById(getCookie("iFrameId"))) {
var windowId = window.parent.document.getElementById(getCookie("iFrameId")).parentNode;
windowHeight = windowId.style.height.replace("px", ""); // replacing the 'px' so that it will not return NaN
var divHeight = windowHeight - 100;
$("#" + content).height(divHeight);
$("#" + content).height(divHeight);
}
});
}
So my problem is its detecting when I stretch it from the bottom corner. But when I stretch it vertically, the function will not trigger.
I'm building a website. http://check.topicwine.com
Have a look to see my work.
I want to make a static sidebar. I'm using the code:
$(function() {
var offset = $("#ad-wrapper").offset();
var topPadding = 60;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#ad-wrapper").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#ad-wrapper").stop().animate({
marginTop: 0
});
};
});
});
The sidebar comes along, but it also goes where it shouldn't. I mean, it enters the footer as well. Rather, it overlaps the footer.
I want it to stop next to the grid.
Thanks, in advance. :)
Add overflow:hidden to div#content. This way we will get the proper height of the content div.
Now $('#content').height() + $('#content').offset().top is the maximum distance the sidebar should move. Which means, the sidebar's offset.top + height should not go more than this.
Add this check in your scroll handler
Set a limit for the top margin, since the sidebar can't go past the $('#main') element.
$(function() {
var offset = $("#ad-wrapper").offset();
var topPadding = 60;
$(window).scroll(function() {
var scrollTop = $(window).scrollTop(); // Store this for convenience
if (scrollTop > offset.top) {
var newMarginTop = scrollTop - offset.top + topPadding;
// The sidebar can only go so far!
var marginLimit = $('#main').height() + $('#main').offset().top - offset.top - $("#ad-wrapper").height();
if (newMarginTop > marginLimit)
newMarginTop = marginLimit;
$("#ad-wrapper").stop().animate({
marginTop: newMarginTop
});
} else {
$("#ad-wrapper").stop().animate({
marginTop: 0
});
}
});
});
I have a sort of sidebar on my website, which has to scroll down together with the user so that it is always in the view.
The code I'm using now is actually working fine however there is one problem. On smaller screens the sidebar scrolls before your at the sidebar thus making it impossible to see it all even if you scroll.
So what I want is the sidebar to scroll with the bottom instead of it being pushed down with the top so that when you reach the end of the sidebar it starts to scroll.
This is the code that I'm currently using.
var documentHeight = 0;
var topPadding = 10;
$(function() {
var offset = $("#mainright").offset();
documentHeight = $(document).height();
$(window).scroll(function() {
var sideBarHeight = $("#mainright").height();
if ($(window).scrollTop() > offset.top) {
var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
var maxPosition = documentHeight - (sideBarHeight);
if (newPosition > maxPosition) {
newPosition = maxPosition;
}
$("#mainright").stop().animate({
marginTop: newPosition
});
} else {
$("#mainright").stop().animate({
marginTop: 0
});
};
});
});
I guess the "best practice" for accomplishing a task like this is to use dynamically changing css position from absolute to fixed and vice versa. A basic example could look like:
$(function(){
var $box = $('.box'),
offset = $box.offset(),
doc_h = $(document).height();
$(window).scroll(function(){
if($(window).scrollTop() > offset.top) {
if(!$box.hasClass('fix'))
$box.toggleClass('normal fix');
}
else{
if(!$box.hasClass('normal'))
$box.toggleClass('normal fix');
}
});
});
Example in action: http://www.jsfiddle.net/YjC6y/14/
$(function() {
var top = 50;
$(window).scroll(function() {
$('#box').stop().animate({ top: $(window).scrollTop() + top}, 1000);
});
});
Try the example : http://jsbin.com/omiyi3
I think you can instead make the sidebar responsive by throwing your function into one of these:
if (responsive_viewport >= 768) {}
This makes it so that the function will only load if the viewport is bigger than or equal to 768px.