I am trying to run some script when div reaches to a certain point when it's scrolled. There is a fixed navigation and when the user scrolls the window it suppose change the nav name once it reaches close to the nav. I am using the $(window).scroll function but it only checking the div position once and not updating the value. How to make scroll check the window size every 5-10 px move so that it doesn't take too much memory/processing.
The code is set up at: http://jsfiddle.net/rexonms/hyMxq/
HTML
<div id="nav"> NAVIGATION
<div class="message">div name</div>
</div>
<div id="main">
<div id="a">Div A</div>
<div id ="b"> Div B</div>
<div id ="c"> Div C</div>
</div>
CSS
#nav {
height: 50px;
background-color: #999;
position:fixed;
top:0;
width:100%;
}
#main{
margin-top:55px;
}
#a, #b, #c {
height:300px;
background-color:#ddd;
margin-bottom:2px;
}
SCRIPT
$(window).scroll(function() {
var b = $('#b').position();
$('.message').text(b.top);
if (b.top == 55) {
$('.message').text("Div B");
}
});
Try this jsFiddle example
$(window).scroll(function() {
var scrollTop = $(window).scrollTop(),
divOffset = $('#b').offset().top,
dist = (divOffset - scrollTop);
$('.message').text(dist);
if (b.top == 55) {
$('.message').text("Div B");
}
});
Your original code was only checking the position of the div relative to the top of the document which never changes. You need to calculate in the amount of scroll the window has incurred and calculate accordingly.
Also note the difference beyween jQuery's .position() and .offset() methods. The .position() method allows us to retrieve the current position of an element relative to the offset parent. Contrast this with .offset(), which retrieves the current position relative to the document.
Related
I want to keep a div (id='fixedDiv') at the top of the window while the user scrolls up and down the webpage. The page has another much taller div (id='tallDiv'). I want the user to scroll the page up and down to see the content of tallDiv, and fixedDiv to always be displayed at the top of the window during the scrolling.
The problem is if the user does a horizontal scroll, tallDiv appears to move left or right, while fixedDiv stays put. My question is how do I keep tallDiv from "moving?"
I tried to detect a horizontal scroll in the $(window).scroll event by keeping track of $(document).scrollLeft() and setting tallDiv's position to 'fixed' during a horizontal scroll. I then use a timer to set tallDiv's position back to 'relative' But that gets ugly.
Does anyone have any ideas on how I can accomplish what I want? My code follows:
function SetScrollable() {
$('#tallDiv').css('position', 'relative');
}
var lastScrollLeft;
$(window).scroll(function (event) {
// what the y position of the scroll is
var documentScrollLeft = $(document).scrollLeft();
if (lastScrollLeft != documentScrollLeft) {
lastScrollLeft = documentScrollLeft;
$('#tallDiv').css('position', 'fixed');
setTimeout('SetScrollable()', 500);
}
else {
$('#tallDiv').css('position', 'relative');
}
});
<form id="form1" runat="server">
<div id="fixedDiv" style="position:absolute;background-color:yellow; height:40px; width:40px;" >
</div>
<div id="tallDiv" style="position:relative; left:300px; top:0px; background-color:green; height:400px; width:40px;" >
</div>
</form>
can you position the tallDiv absolute and right aligned? (ex:position absolute; right: 100px;)
Okay so I have a page that uses javascript to fix the header to the top of the page (thus removing the banner) when you scroll past the bottom of the banner (about 200px down page).
On this website I've been using containers that have the position:inherit; property set to contain each part of the page. These then have a relatively positioned element inside them so I can place all my absolutely positioned elements where I like.
My problem is that id="content" keeps jumping to the top of the page when the javascript changes id="header" to position:fixed;
See here: www.obsojb.com
I have tried absolutely positioning id="content" and setting it's top value but it wouldn't work and I'm a bit stuck.
Here is a very simplified version of the HTML:
<body>
<div id="page"> <!--inherit-->
<a id="banner"></a> <!--inherit-->
<div id="header"> <!--inherit-->
<div id="lang"> <!--relative-->
<ul>...</ul> <!--inherit-->
<other divs> <!--absolute-->
</div>
<div id="nav"> <!--relative-->
<ul>..</ul> <!--inherit-->
<a id="userbutton"></a> <!--absolute-->
</div>
</div
<div id="content0"> <!--inherit-->
<div id="content"> <!--relative-->
<PAGE CONTENT> <!--absolute-->
</div>
</div>
<div id="footer"></div>
</div>
</body>
Here is my javascript:
var bannerheight // Glob var
window.onload = function() {
window.bannerheight = $('#bannerimg').height();
checkOffset();
};
window.onscroll = function(oEvent) {
checkOffset();
}
function checkOffset() {
if (window.pageYOffset >= window.bannerheight) {
document.getElementById("header").style.position = "fixed";
document.getElementById("banner").style.display = "none";
document.getElementById("padding").style.height = window.bannerheight+"px";
}
else {
document.getElementById("header").style.position = "inherit";
document.getElementById("banner").style.display = "block";
document.getElementById("padding").style.height = "0px";
}
}
and here is the relevant CSS:
#page {
margin:0px auto;
}
#lang {
position:relative;
}
#nav {
position:relative;
margin:0px auto;
}
#content0 {
height:800px;
}
#content {
position:relative;
margin:0px auto;
}
Try giving the content div a "margin-top" and set it to the number of pixels that the page is "jumping". Then when you scroll up and reset the position, undo the margin-top back to zero.
I've tested this and it solved my jumping issue.
I'm not sure what you expect as output but position: fixed works on the document, globally. It not only ignores element flow (like position: absolute) but it also ignores scrolling.
position: absolute is relative to it's offset parent which can be an item with position: relative.
You typically only want to use position: fixed if something needs to stick to the window, like a little popup that scrolls with as you go down the page. The Facebook header is a good example. Their header bar is fixed to the top of the window and stays there even if you scroll.
So i have the following HTML markup;
<div id ="page_shadow">
<div id="blog_content">
<div id="main_content_container>
Main Content
</div>
<div id="swrapper">
<div id="blog_sidebar">
Sidebar Content
</div>
</div>
</div>
</div>
The following CSS;
#blog_sidebar.fixed {
position: fixed;
top: 0;
}
#swrapper {
position:absolute;
right:0;
}
#blog_sidebar {
width: 330px;
padding:10px;
padding-top:25px;
height:auto;
}
#main_content_container {
width:600px;
float:left;
height:auto;
padding-bottom:15px;
}
#blog_content {
position:relative;
width:960px;
margin-left:auto;
margin-right:auto;
min-height:1300px;
height:auto;
background:#FFFFFF;
z-index:5;
}
#page_shadow {
background:url('../images/background_shadow.png') top center no-repeat;
padding:10px;
margin-top:-60px;
}
The following javascript;
<script>
$(document).ready(function(){
var top = $('#blog_sidebar').offset().top - parseFloat($('#blog_sidebar').css('marginTop').replace(/auto/, 0));
var bottom = $('#blog_content').position().top+$('#blog_content').outerHeight(true) - $('#blog_sidebar').height() - 35;
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) { //&& y <= bottom
// if so, ad the fixed class
$('#blog_sidebar').addClass('fixed');
} else {
// otherwise remove it
$('#blog_sidebar').removeClass('fixed');
}
});
});
</script>
Ok so basically there are two scenarios which occur. IF the page is loaded with the browser viewport above the y position before #blog_sidebar's position is changed to fixed then the element stays within the blog_content container.
HOWEVER, if the page is loaded with if (y >= top) = True resulting in $('#blog_sidebar').addClass('fixed'); the element is then pushed outside the blog_content container.
Again this only occurs if the viewport is = or below the trigger when the page is loaded.
For example if i were to go half way down the page and then click for the page to refresh, the browser loads the page and the element and then jumps to the position it was previously. The fixed position element shown up in the correct position for a split second and then jumps outside #blog_content aligning with the left of the element.
Ive got a little example to show the basics of the layout etc, but i dont think i can show exactly whats happening within jsfiddle. http://jsfiddle.net/ce3V3/
TLDR
Since this is quite confusing. Short version is i am changing a static positioned element with a fixed position element within the DOM, which is resulting in the fixed positioned element being out of place if the window is refreshed and jumps past a certain point. I dont want the fixed position element to jump out of place if a user relaods the page and the window jumps halfway down the page.
The JS code below is meant to get the height of the browser and the height of the .banner div. If the banner height is greater than the browser height, append two divs (.title and .social) to the body otherwise don't do anything and leave .title and .social divs where they are.
I'm also wanting the .title and .social divs to fade out when a user scrolls down the page and fade in when they get back to the top of the page.
The problem
This code does work but not all the time. Sometimes it will display correctly other times it won't. By that I mean the height of div.banner can be greater than the height of the browser window yet .title and .social will not be appended to the body. Is there anything wrong with this code that could cause this issue to occur?
$(document).ready(function () {
// fade in/fade out banner titles
$(window).trigger('scroll');
var divs = $('.social, div.banner .title');
$(window).scroll(function(){
if($(window).scrollTop() < 10){
divs.fadeIn("fast");
} else {
divs.fadeOut("fast");
}
});
// Position feature image title and social icons according to browser window height
var windowHeight = $(window).height(); // Gets browser viewport height
var bannerHeight = $(".banner").height(); // Gets .banner height
if (bannerHeight > windowHeight) {
$("body").append($('.banner .title'));
$("body").append($('.social'));
}
else {
//Display .title and .social in .banner div (as originally in HTML)
}
});
My HTML code that is on page load for reference:
<div class="banner y1">
<div class="title" id="feature-title">
<!-- title content here -->
</div>
<div class="social" id="feature-social">
<!-- social content here -->
</div>
</div>
If height changes on images you should use onload method.
http://api.jquery.com/load-event/
i have a link which is placed ontop of a site. when it is clicked , a DIV will be shown. the div will sit just below the LINK. if the link position from left is 215px , the DIV position from left will also be 215px. How can i track the position of the link to determine the position of the DIV so it could stick to it.
Link
<div id="float" style="display:none;">Some text</div>
jQuery:
$('#link').click(function(){
$('#float').css('display','block');
});
Thanks.
The best way to stick something absolute positioned to something on the page is to wrap it with relative positioned element.
You can try this:
<div style="position: relative">
Link
<div id="float" style="display:none; position: absolute; top: 10px; left: 0;">Some text</div>
</div>
Then you can position your floating element as you wish relative to the corners of the wrapping div (or other wrapping element) using left, top, right or bottom.
Serious advantage of that approach is that floating div will always be tied to the parent even if the window size is changed.
JQuery has built in functions for getting positions of elements.
See Offset for position related to document, or Position for position related to element's parent
Example to get the position of the link element...
$('#link').click(function () {
var link = $(this);
var linkOffset = link.offset();
var xPos = linkOffset.left;
var yPos = linkOffset.top;
$('#float').css('display', 'block');
});
<style>
#float {
display:none;
position:absolute;
border:1px solid red;
padding:5px;
margin:0;
}
</style>
Link
<div id="float">Some text</div>
<script>
$(function() {
$("#link").click(function() {
$("#float")
.css("left", $(this).offset().left)
.css("top", $(this).offset().top + $(this).height())
.show();
});
});
</script>