Develop Reference

Adding a class between when user scrolls between 200px and 300px only

I'm trying to add a class to div when a user scrolls down the page. When they scroll 200px down the page I want a class to be added and then once the user scrolls down 300px I want the class to be removed. Similarly, when the user scrolls back up the page and is 300px from the top, I then want the class to be added until it gets to 200px and then removes the class.
I've tried so many variations but I think I'm approaching it all wrong. Here's a jsfiddle of how far I've gotten so far - http://jsfiddle.net/v8my3sr1/
$(window).on('scroll',function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
$(".trigger").addClass("wow");
} else {
$(".trigger").removeClass("wow");
}
});

You condition is incorrect. You should check that scroll value is between 200 and 300
$(window).on('scroll',function() {
var scroll = $(window).scrollTop();
if (300 >= scroll && scroll >= 200) {
$(".trigger").addClass("wow");
} else {
$(".trigger").removeClass("wow");
}
});
$(window).on('scroll',function() {
var scroll = $(window).scrollTop();
if (300 >= scroll && scroll >= 200) {
$(".trigger").addClass("wow");
} else {
$(".trigger").removeClass("wow");
}
});
.container {
height: 2000px;
}
.trigger {
margin-top: 300px;
height: 400px;
}
.wow {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="trigger">
<h1>Trigger container</h1>
</div>
</div>
Also you can use .toggleClass() to simplifying code
$(window).on('scroll',function() {
var scroll = $(window).scrollTop();
$(".trigger").toggleClass("wow", 300 >= scroll && scroll >= 200);
});

Try something like this :
$(window).scroll(function(){
var cutoff = $(window).scrollTop();
$(".trigger").each(function(){
if($(this).offset().top + $(this).height() > cutoff){
panel.removeClass('wow');
$(this).addClass('wow');
return false;
}
})
})

Bootstrap fix div element on top and prevent resize

I want to fix a div element on the top by scrolling.
I have achieved this with the following code:
Javascript:
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#betslip').offset().top - parseFloat($('#betslip').css('margin-top').replace(/auto/, 0));
$(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) {
// if so, ad the fixed class
$('#betslip').addClass('fixed');
} else {
// otherwise remove it
$('#betslip').removeClass('fixed');
}
});
}
CSS:
#betslip.fixed {
position: fixed;
top: 0;
}
HTML:
<div class="col-md-12" id="betslip">
...
</div>
The problem is that, while scrolling the div element is getting larger. How I can fix/prevent this?
Here is a screenshot after and before the scrolling:

By adding position: fixed; to #betslip it will ignore width of container. Try adding width: inherit; to #betslip.fixed

How do I fix a div during scroll relative to Squarespace image blocks?

I'm trying to fade in/out and fix the blue div on the left when scrolled relative to the image blocks on the right.
http://www.warface.co.uk/#/testing/
pass: squared
.meta { /*This is the block I'm trying to stick/*
background: blue;
position: fixed;
width: 372px;
float: left;
z-index: 3;
right: 100%;
}

Here is the basics in JavaScript:
function controlMeta() {
var meta = document.querySelector("div.meta");
console.log(meta);
if (window.scrollY > 500) {
meta.style.display = "none";
} else {
meta.style.display = "block";
}
}
window.addEventListener("scroll", function () {
controlMeta();
})
You can get your elements scroll position with something like this:
document.getElementById("57513a9220c6475fb77061c5").getBoundingClientRect().top+window.scrollY
EDIT 1
Here is a method for associating elements with the meta box, based upon the previous:
//Load elements that affect the meta box
var meta = [];
var images = document.querySelector('.sqs-gallery').getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
meta.push({
node : images[i],
height : images[i].height,
//top is used with scroll position to determine which element we are looking at
top : images[i].getBoundingClientRect().top + window.scrollY
});
}
function controlMeta() {
meta.filter(function (el) {
//You might need to pad your filter a little
return window.scrollY < el.top && window.scrollY > el.top - el.height;
}).forEach(function (el) {
//These are the matching elements. I'm just fetching the src as an example
document.querySelector("div.meta div.body").innerHTML = el.node.src;
});
}
window.addEventListener("scroll", function () {
controlMeta();
});

Stop fixed element scrolling at certain point?

I have a fixed position nav that fades in at a set scroll point.
I now need to stop it scrolling just before the page footer (about 400px from the bottom). I know the way to do this would be to change the position from fixed to absolute but I'm not sure how to implement that through jquery?
Live Example on the jsFiddle
jQuery:
var isVisible = false;
$(window).scroll(function(){
var shouldBeVisible = $(window).scrollTop()>1000;
if (shouldBeVisible && !isVisible) {
isVisible = true;
$('#floatingnav').fadeIn('slow');
} else if (isVisible && !shouldBeVisible) {
isVisible = false;
$('#floatingnav').fadeOut('fast');
}
});
CSS:
#floatingnav{
position: fixed;
top: 40px;
display: none;
}

Check if the bottom position of the navigation is below the footer top position. If this is the case, set a class or a specific css-prop.
$(window).scroll(function(){
var windowTopPos = $(window).scrollTop();
var footerTopPos = $('#footer').offset().top;
var navBottomPos = $('#floatingnav').offset().top + $('#floatingnav').outerHeight();
if(navBottomPos >= footerTopPos) {
$('#floatingnav').css('position', 'absolute');
}
});

How to show a tip on a proper position near the element?

I have the following div on the page:
<div id="tip">
Tip text here...
</div>
And the following one:
<div class="element">
Element text here...
</div>
Also following js-code:
$(document).ready(function() {
$('.element').hover(function() {
$('#tip').css('top', $('.element').position().top);
$('#tip').css('left', $('.element').position().left);
$('#tip').fadeIn();
}, function() {
$('#tip').fadeOut();
});
});
It shows tip on left top corner of the page. How do I fix this code to show tip on the same position as of the element? (I can't place tip and element near each other on the code.)
Thanks a lot for the help!

Giving title to Div tag show a tool tip... try like below....
<div title="ToolTip for Hello World">
Hello World
</div>
See this fiddle : http://jsfiddle.net/TPyKS/5/

.position is relative to the parent, try .offset, who is relative to the document

That's how I would do a tooltip :
Html
<div class="tip" title="Title here">
Element text here...
</div>
jQuery
$(document).ready(function() {
$('.tip').each(function(i, e) {
var $this = $(e),
originalTitle = $this.attr('title'),
//Keep the title
$title = $('<p class="tooltip" />').html(originalTitle);
//Remove initial one
$this.attr('title', '');
$title.appendTo($this);
});
$('.tip').hover(function() {
$(this).find('.tooltip').fadeIn();
}, function() {
$(this).find('.tooltip').fadeOut();
});
});
Css
.tip {
position:relative;
}
.tooltip {
position:absolute;
display:none;
}
Just set the position of your tooltip with css with this. The title attribute permits to the users with disabled javascript to see them too.
See fiddle.

Try this:
HTML
<div class="element">
Element text here...
</div>
<div id="tip">
Tip text here...
</div>
CSS
#tip{
position: absolute;
display: none;
background: #ccc;
padding: 10px;
}
.element:hover + #tip{
display: block;
}
div{
float: left;
}
DEMO: http://jsfiddle.net/enve/TPyKS/10/

You can try using following function to help you determine absolute coordinates of the domElement. left and top parameters can be supplied to get position with relative shift from left-top corner of the element.
var findAbsolutePosition = function(domElement, left, top) {
if (!parseInt(left)) {
left = 0;
} else {
left = parseInt(left);
}
if (!parseInt(top)) {
top = 0;
} else {
top = parseInt(top);
}
var box = domElement.getBoundingClientRect();
var body = document.body;
var docElem = document.documentElement;
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop || body.clientTop || 0;
var clientLeft = docElem.clientLeft || body.clientLeft ||0;
var position = {};
position.y = box.top + scrollTop - clientTop + top*Settings.get('scale');
position.x = box.left + scrollLeft - clientLeft + left*Settings.get('scale');
position.width=box.width;
position.height=box.height;
return position;
}
Other way is to dynamically insert tip element to DOM near the element that need tip. Which method to use is up to you