I want to create a sticky div as smooth as in this example: http://www.nytimes.com/interactive/2010/11/13/weekinreview/deficits-graphic.html?src=tp&_r=0
Right now, my example isnt smooth at all, but really jumpy. I have this JS-code:
$(window).scroll(function () {
var scroll_top = $(this).scrollTop();
if (scroll_top > 66) {//height of header
$('.wrapper').addClass('sticky');
} else {
$('.wrapper').removeClass('sticky');
}
});
And the HTML:
<div class="wrapper">
<h4>Ausgaben in Millionen Franken</h4>
<div class="background">
<div id="kunstmuseum"></div><div id="historisch"></div><div id="naturhist"></div><div id="kulturen"></div><div id="antik"></div><div id="beyeler"></div><div id="weitereMuseen"></div><div id="theaterBasel"></div><div id="kaserne"></div><div id="weitereTheater"></div><div id="sinfonie"></div><div id="jazz"></div><div id="rock"></div><div id="literatur"></div><div id="erbe"></div><div id="wettbewerb"></div><div id="weiteres"></div><div id="zoo"></div>
</div>
<div id="eins">0</div>
<div id="zwei">30</div>
<div id="drei">60</div>
<div id="vier">90</div>
<div id="fuenf">120</div>
<div id="eingespart"><h4>Total eingespart: <div id="totalSum">0 CHF</div></h4></div>
</div>
Here is the jsfiddle: http://jsfiddle.net/w640ftLf/3/
It's not really how I would do it, but your function works fine.
The easiest way to fix your problem is to add padding-top: 66px; (66 being the header height) to the body element at the same time you add the class 'sticky'.
Let me know if this works for you.
It looks like you're attaching the sticky class to the wrong element. Try this, instead:
$(window).scroll(function () {
var scroll_top = $(document).scrollTop();
if (scroll_top > 66) {//height of header
$('.background').addClass('sticky');
} else {
$('.background').removeClass('sticky');
}
});
Also, for education, you can take a look at how your example is doing it.
Related
I have one "sticky-element" div, on page load which I have been set position:fixed with bottom right aligned.
Requirement : on page scroll I would like to set it stick to just before on my "footer-area".
Issue : I have handled successfully css and js part on load, but I am not able to find logic that how can i add another class to my "sticky-element" once "footer-area" will start visible on window.
HTML
<div class="container">
<div class="page-section">
<p>lots of code and other div nested in this as well</p>
</div>
<div class="sticky-element">
</div>
<div class="footer-area">
</div>
</div>
jquery
$(window).on("load",function(){
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(){
$(".sticky-element").addClass("some-class");
}
else {
$(".sticky-element").removeClass("some-class");
}
});
});
css
.sticky-element { position:fixed; }
.sticky-element.some-class { position:static; }
In above one if() my logic is that I would like to use if "footer-area" is visible on window than only add class will works.
Please suggest if anyone has Simple and short(not too much complex) coding way for this.
Thanks in advance
Try something like that:
<div class="container">
<div id='wraper'>
<div class="page-section">
<p>lots of code and other div nested in this as well</p>
</div>
<div class="sticky-element">
</div>
</div>
<div class="footer-area">
</div>
</div>
$(window).on("load",function(){
$(window).scroll(function() {
var bottomOfWraper = $('#wraper').offset().top + $('#wraper').outerHeight();
var bottomOfWin = $(window).scrollTop() + $(window).height();
if( bottomOfWin > bottomOfWraper){
$(".sticky-element").addClass("some-class");
}
else {
$(".sticky-element").removeClass("some-class");
}
});
});
I have a script that is made to add .fix class to a header tag with #header-wrap id once the page is scrolled a certain amount, but for some reason nothing happens on scroll.
HTML:
<header id="header-wrap">
<div id="redline"></div>
<div id="velkommen"></div>
<div id="header">
<div id="indre">
<h1 id="logo">MCBERGBYS</h1>
</div>
</div>
</header>
<script>
var wrap = $("#header-wrap");
wrap.on("scroll", function(e) {
if (this.scrollTop > 143) {
wrap.addClass("fix");
} else {
wrap.removeClass("fix");
}
});
</script>
I'm very new to javascipt so I bet something obvious is off. Any help is appreciated, thank you.
You need to bind your .on('scroll') event to the $(window), not to your #header-wrap element. This will check when the document is being scrolled up and down, as opposed to seeing when an individual element is being "scrolled" (like when you move up and down in a textarea).
Hi Please can someone help me, basically i want to run the Javascript when #stats become fully visible around center of the page. Once the javascript has run once i dont want it to run again unless they revisit the page.
Any help would be much appreciated thanks in advance.
My Code is below.
<div id="stats">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4">
<h2><span id="totalFranchises" class="franchise-number">108</span></h2>
</div>
<div class="col-xs-12 col-sm-8">
</div>
</div>
</div>
</div>
<script>
var options = {
useEasing : true,
useGrouping : true,
}
var countUp = new countUp("totalFranchises",108, 256, 0, 3, options);
countUp.start();
</script>
Cheers,
Wes.
I did this recently and I used the heights of the divs above the div that contains the countUp. If you want to understand more read here, here and here. This if you don't want to use jQuery.
My solution looks something like this in the controller:
$window.onscroll = function() {
myFunction()
};
function myFunction() {
var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop; //this makes it work in all browsers
var height = document.getElementById("previousDiv").clientHeight; //the height of the previous div for example
if (bodyScrollTop > height) {
//start the countUp
} else {
//something else
}
}
I have this div scrolling script:
$(document).ready(function () {
$('.tab-box').each(function () {
var top = 0;
var $tabbox = $(this);
var height = $tabbox.height();
$(this).find('.tab').each(function () {
var shift = top;
$(this).click(function () {
$tabbox.find('.items').animate({
marginTop: shift + 'px'
});
$tabbox.find('.tab').removeClass('active');
$(this).addClass('active');
});
top -= height;
});
$(this).find('.tab:eq(0)').addClass('active');
});
});
If I understand it correctly it gets every divs working only within the div "tab-box".
http://jsfiddle.net/9SfEH/5/
What I want to change is that I separate the "tabs" from the main tab-box div, but make them still controll the "items".
http://jsfiddle.net/w65Dn/1/
I was trying for a simple solution buuut couldn't come up with one by myself.
Thanks everyone in advance :)
The problem was that in the original code, it was looking for the tab clickables using $(this).find(".tab"), but the .tabs were no longer inside of the .tab-box. So, if you just search globally, with $(".tab"), it works.
Note that you can no longer have more than one tab box, because it is searching globally for the .tabs. You could use something like javaCity's solution (i.e. wrapping everything in another div) to fix this.
You were looking for .tabs inside the tab-box which does not exist. So how about creating a div outside of .tabs which also encloses tab-box?
http://jsfiddle.net/3D8we/
HTML:
<div class="enclosingDiv">
<div class="tabs">
<div class="tab">1</div>
<div class="tab">2</div>
<div class="tab">3</div>
</div>
<div class="tab-box">
<div class="items">
<div class="item" style="background: #cbe86b;"></div>
<div class="item" style="background: #f2e9e1;"></div>
<div class="item" style="background: #1c140d;"> </div>
</div>
</div>
</div>
JS:
$(document).ready(function () {
$('.tab-box').each(function () {
var top = 0;
var $tabbox = $(this);
var height = $tabbox.height();
$('.enclosingDiv').find('.tab').each(function () {
var shift = top;
$(this).click(function () {
$tabbox.find('.items').animate({
marginTop: shift + 'px'
});
$tabbox.find('.tab').removeClass('active');
$(this).addClass('active');
});
top -= height;
});
$(this).find('.tab:eq(0)').addClass('active');
});
});
On line 7, change the selector from this to .tabs
$(this).find('.tab') becomes $(.tabs).find('.tab')
as seen here: jsfiddle example
Here is the problem site.
Let me explain in case I will solve it, so everyone can know about it.
I have two divs with the following html code
<div id="dataview" class="data-views" style="width:100%; height:580px; padding:0; border:solid; margin-bottom:10px;">
<div class="row-fluid">
<div class="col-md-8">
<div class="timeline"></div>
</div>
<div class="col-md-4">
<div id="map" class="map"></div>
</div>
</div>
</div>
The two divs I am talking about are the "col-md-8" and "col-md-4"
If you try to resize the window, then the second div will move on the bottom of the first one, but it covers everything else behind it. I try to play with css, but without a success. Any suggestion?
Edit:
Screenshots from the problem
How it is on full window: screen1
How it is after resize: screen2
Edit 2: I think something as a sollution but it is to complicated for me. Maybe someone could help. If the size of the screen is less than col-md-8 (so the second div will move to the bottom), I will change the height of the div (data-views) to 580+(height of map).
I tried this:
<script>
$(window).resize(resizemap);
function resizemap() {
var winWidth = $(window).width();
if (winWidth < 995) <--on 995px the map doesn't fit and move on the bottom.
{
var Hmap = $("#map").height();
$('#dataview').css("height", 580+Hmap);
}
}
</script>
The problem is that instead of change the size of the whole div, it changes the height only of the timeline. And the map moves again.
I figure how to do it. Here is the result:
HTML:
<div id= "dataview" style = "height:590px;border:solid;">
<div class="data-views" style="width:100%;height:580px;padding:0;margin-bottom: 10px;">
<div class="row-fluid">
<div class="col-md-8">
<div class="timeline"></div>
</div>
<div class="col-md-4">
<div id="map" class="map"></div>
</div>
</div>
</div>
</div>
And here is the javascript:
<script>
$(window).resize(resizemap);
window.onload = resizemap;
function resizemap() {
var winWidth = $(window).width();
if (winWidth < 995)
{
var Hmap = $("#map").height();
$('#dataview').css("height", 590+Hmap);
}
}
</script>
The only problem is that if I resize the window with the maximize button of the browser, the dataview height stay the same.