We Keep Coding

Repositioning element on scroll with jQuery

I am trying to reposition an element on scroll using jQuery scroll event and just adjusting margin-top property.Element is inside bootstrap nav so its showed along all other elements inside nav on desktop and for mobiles its just fixed positioned in upper left corner.element contains two flag links for different page languages.
My code is:
Html:
<div class="navbar yamm navbar-default">
<div class="flags">
<img src="UK_flag.png" alt="English">
<img src="DK_flag.png" alt="Danish">
</div>
<div class="navbar-header">
....
js:
var scrollingDiv = $(".flags").offset().top - $(window).scrollTop();
$(window).scroll(function(){
if(scrollingDiv > 100) {
$(".flags").css("margin-top", "24px");
}
if(scrollingDiv == 92) {
$(".flags").css("margin-top", "10px");
}
console.log(scrollingDiv);
});
console log displays always 92 as its position.One note page contains 1 more navigation which is above bootstrap nav so I need this margin-top fix for that.Whan nav goes down it reposition itself nicely,but whan it comes back it keeps margin-top property at 10px and flags jump out of aligment.
Thanks for all future ansers :)

Put var scrollingDiv = $(".flags").offset().top - $(window).scrollTop(); this inside you're $(window).scroll(function(){});
When you declare it like its current state. The scrollingDiv will keep 92px because it only sets it on page load.
If inside the scroll() function, it will update the value when the user is scrolling.
Small Demo (I dont know you're actual layout)
$(window).scroll(function(){
var scrollingDiv = $(".flags").offset().top - $(window).scrollTop();
if(scrollingDiv > 100) {
$(".flags").css("margin-top", "24px");
}
if(scrollingDiv >= 92 && scrollingDiv < 100) {
$(".flags").css("margin-top", "10px");
}
console.log(scrollingDiv);
});
.scroll-container {
height: 2000px;
overflow: auto;
}
.scroll-container .flags {
position: relative;
top: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroll-container">
<div class="flags">
<img src="UK_flag.png" alt="English">
<img src="DK_flag.png" alt="Danish">
</div>
</div>

How to scroll div with page without position: fixed?

I found this script:
$(function(){
var btn = $('.social');
var btnPosTop = btn.offset().top;
var win = $(window);
win.scroll(function(e){
var scrollTop = win.scrollTop();
if(scrollTop >= btnPosTop){
btn.css({position:'fixed',left:'82%'});
}else if(btn.css('position') === 'fixed'){
btn.css({position:'',left:''});
}
});
});
Which works great. I changed the original field to '.social' so that it would work with my code.
I am not looking for a crap fix of "left: 82%" though.
I want to avoid the position: fixed; and simply scroll the div where it sits.
My tree is #container .contain .single-content .social
The position: fixed is my main problem, but if you know, then stopping .social once it reaches the very bottom of .single-content would be a major plus!!
Hopefully I have provided enough information.
HTML:
<div id='container'>
<div class='contain'>
<div class='single-content'>
<div class='first'>
<div class='social'>
content here.. no p tags.. just facebook, twitter buttons etc.
</div>
</div>
</div>
</div>
</div><!-- container -->
EDIT:
website in question: thelackof.com
You can see how the social icons are offset a bit because of my left:82%
If I remove the left:, then the new position: fixed will jump my div out of the containing div and all the way to the left of the next containing div.
I would like it to stay where it is and scroll down once reached.

EDIT no. 2: First of all:
So it will get a value that won't disturb with the main-contents:
#container .contain .single-content .first .social {
float: left;
position: absolute;
width: 15%;
right: 0;
}
Then this:
$(function(){
var btn = $('.social');
var btnPosTop = btn.offset().top;
var win = $(window);
win.scroll(function(e){
var scrollTop = win.scrollTop();
if(scrollTop >= btnPosTop){
btn.css({position:'fixed'});
}else if(btn.css('position') === 'fixed'){
btn.css({position:''});}
if (btnPosTop >= $('.single-content').offset().top-92){
btn.css({position:''});
}
});
});
I might be getting your question wrong but I think this is what you asked for. I removed the left property.
Hope it helps :)
EDIT: I've added:
if (btnPosTop >= $('.single-content').offset().top){
btn.css({position:''});
}
So it will scroll until the btnPosTop is greater than the offset().top of .single-content
Please let me know if it works

Sticky header after some scrolling?

okay here's an example of what i am trying to ask,
the nav bar of usatoday.
I'm using bootstrap affix. here's my code
<div class="header">
<div class="header-1">
<h1>this is some logo</h1>
</div>
<div class="header-2">
<h3>this is some heading</h3>
</div>
</div>
<div class="content" style="height:2500px;">
</div>
<div class="footer">
this is a footer
</div>
JavaScript
$('.header-2').affix({
});
how can I make the div header-2 to be fixed on the top, (when there is some scrolling and the div header-2 just reach the top position) as of the site I've mentioned earlier?
I would love to see the header-1 and header-2, but some scrolling should hide header-1 and stick header-2 to the top most.
thanks

See this Jsfiddle
you can check the position of the slider and add class accordingly
$(window).scroll(function () {
if( $(window).scrollTop() > $('#header-2').offset().top && !($('#header-2').hasClass('posi'))){
$('#header-2').addClass('posi');
} else if ($(window).scrollTop() == 0){
$('#header-2').removeClass('posi');
}
});

use jquery look at this example
http://jsfiddle.net/5n5MA/2/
var fixmeTop = $('.fixme').offset().top; // Get initial position
$(window).scroll(function() { // Assign scroll event listener
var currentScroll = $(window).scrollTop(); // Get current position
if (currentScroll >= fixmeTop) { // Make it fixed if you've scrolled to it
$('.fixme').css({
position: 'fixed',
top: '0',
left: '0'
});
} else { // Make it static if you scroll above
$('.fixme').css({
position: 'static'
});
}
});

Bootstrapped answer using Bootstrap.affix()
$('.header-2').affix({
offset: {
top: function () {
return (this.top = $(".header-2").offset().top);
}
}
});
This also needs CSS for the fixed positioning (see the Docs).
The affix plugin toggles between three classes, each representing a
particular state: .affix, .affix-top, and .affix-bottom. You must
provide the styles for these classes yourself (independent of this
plugin) to handle the actual positions.
.header-2.affix {
top: 0;
}
Working example at Bootply: http://www.bootply.com/S03RlcT0z0

<style>
.header {
top: 0%;
left: 0%;
width: 100%;
position:fixed;
}
</style>
I'm sorry didnt look at your problem carefully.
This may helps you Issue with Fixed Header and Bootstrap Affix / Scrollspy - Not jumping to correct location

Missing pixels & body stops centering when resizing jquery

I'm facing some problems with this code. I thought may be you could help me.
First of all, my sections have no padding and no border so the pixels are used only for top, left, right and width properties
and there is no need for outerWidth().
First problem:
In the beginning I set the body 'left' and 'right' property at (window_width - 1100 = 180) so my body width
is 920px.
The thing is it's not. It turns to be 904. I've tested it with chrome and mozilla.
I don't know where the 16 missing pixels are.
Second:
I want my body to be centered when I resize the window and my margins to grow less until body occupies the whole
window.
My body doesn't remain centered, plus only one of the margins grows less.
I found out this is happening because '#content', '#mainContent', 'aside' have a width. I kinda' need that width to be set.
Is there any way I can make my window center itself with jquery and do all the stuff above?
Here is my code:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
body{
position:absolute;
}
#content{
background-color: green;
}
#mainContent{
background-color: orange;
}
aside{
background-color: blue;
}
.floatLeft{
float:left;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<section id="content" class="border">
<section id="mainContent" class="floatLeft" >
mainContent
</section>
<!-- End of main content -->
<aside class="floatLeft">
aside
</aside>
<!-- End of aside -->
<p class="clear"></p>
</section>
<!-- End of content -->
<script type="text/javascript">
$(document).ready(function(){
change_template();
});
change_template = function(){
var window_h, window_w, top, left_right, content_w, mcontent_w, aside_w;
window_h = $(window).height();
window_w = $(window).width();
top = window_h - (window_h - 100);
left_right = window_w - 1100;
content_w = window_w - 2*left_right;
$('#content').css('width', content_w);
mcontent_w = content_w - 300;
$('#mainContent').css('width', mcontent_w);
aside_w = content_w - mcontent_w;
$('aside').css('width', aside_w);
resize_body(top, left_right, left_right);
//next three lines are written only for demonstration purpose
left_right = ($(window).width() - parseInt($('body').css('width')))/2;
alert('body width: '+$('body').css('width'));//it supposed to be 920
alert('left propery value: '+left_right);//it supposed to be 180
$(window).resize(function(){
left_right = ($(window).width() - parseInt($('body').css('width')))/2;
resize_body(top, left_right, left_right);
});
}
resize_body = function(top, left, right){
$('body').css('top', top+'px');
$('body').css('left', left+'px');
$('body').css('right', right+'px');
}
</script>
</body>
</html>

Reset browser style:
html, body {
margin: 0 auto;
padding: 0;
}

Javascript: prevent internal element "scrolling" in an element

I have a script that has a div with a width larger than its' parent, with the parent being set to overflow: hidden;. I have javascript that is setting the left positioning of the big div to create "pages". You can click a link to move between pages.
All of that works great, but the problem is if you tab from one "page" element to another, it completely messes up all the left positioning to move between the pages.
You can recreate this bug in the fiddle I set up by setting your focus to one of the input boxes on page ONE and tabbing until it takes you to page two.
I've set up a demo here.
The code that is important is as follows:
HTML:
<div class="form">
<div class="pagesContainer">
<div class="page" class="active">
<h2>Page One</h2>
[... Page 1 Content here...]
</div>
<div class="page">
<h2>Page Two</h2>
[... Page Content here...]
</div>
</div>
CSS:
.form {
width: 400px;
position: relative;
overflow: hidden;
border: 1px solid #000;
float: left;
}
.pagesContainer {
position: relative; /*Width set to 10,000 px in js
}
.form .page {
width: 400px;
float: left;
}
JS:
slidePage: function(page, direction, currentPage) {
if (direction == 'next') {
var animationDirection = '-=';
if (page.index() >= this.numPages) {
return false;
}
}
else if (direction == 'previous') {
var animationDirection = '+=';
if (page.index() < 0) {
return false;
}
}
//Get page height
var height = page.height();
this.heightElement.animate({
height: height
}, 600);
//Clear active page
this.page.removeClass('active');
this.page.eq(page.index()).addClass('active');
//Locate the exact page to skip to
var slideWidth = page.outerWidth(true) * this.difference(this.currentPage.index(), page.index());
this.container.animate({
left: animationDirection + slideWidth
}, 600);
this.currentPage = page;
}
The primary problem is that whatever happens when you tab from say, an input box on page one to something on page 2, it takes you there, but css still considers you to be at left: 0px;. I've been looking all over for a solution but so far all google has revealed to me is how to stop scrollbar scrolling.
Any help or suggestions would be appreciated, thanks!
P.S. The html was set up like this so that if javascript is disabled it will still show up all on one page and still function properly.

I updated your fiddle with a fix for the first tab with the form: http://jsfiddle.net/E7u9X/1/
. Basically, what you can do is to focus on the first "tabbable" element in a tab after the last one gets blurred, like so:
$('.form input').last().blur(function(){
$('.form input').first().focus();
});
(This is just an example, the first active element could be any other element)

Elements with overflow: hidden still have scrolling, just no scroll bars. This can be useful at times and annoying at others. This is why your position left is at zero, but your view of the element has changed. Set scrollLeft to zero when you change "pages", should do the trick.