I'm trying to get text to pop up at a fixed location at different y-scroll intervals however, I can't seem to chain the scripts correctly. It seems to skip the first action of displaying the first message.
Code: http://jsfiddle.net/k8bnd/
var startY = 1500;
var stopY = 2000;
$(window).scroll(function(){
checkY();
});
function checkY()
{
console.log($(window).scrollTop());
if($(window).scrollTop() > startY && $(window).scrollTop() <= stopY)
{
console.log("Show");
$('.titleTwo').show();
}
else
{
console.log("Hide");
$('.titleTwo').hide();
} }
checkY();
Your functions should have different names. Try
var startY1 = 900;
var stopY1 = 1800;
var startY2 = 1801;
var stopY2 = 2500;
$(window).scroll(function(){
checkY();
});
function checkY()
{
console.log($(window).scrollTop());
if($(window).scrollTop() > startY1 && $(window).scrollTop() <= stopY1)
{
console.log("Show");
$('.foxedDiv').show();
}
else
{
console.log("Hide");
$('.foxedDiv').hide();
}
if($(window).scrollTop() > startY2 && $(window).scrollTop() <= stopY2)
{
console.log("Show");
$('.foxedDivved').show();
}
else
{
console.log("Hide");
$('.foxedDivved').hide();
}
}
checkY();
Fixed Fiddle:
http://jsfiddle.net/k8bnd/1/
This is happening because you have overwritten the previous values/functions. To make this more dynamic you can add data-* attributes to each message element specifying which positions they are valid for. And then in the scroll event check each element's position data, if the window is within that range show it, otherwise hide it.
HTML
<!-- Changed the classes both elements had to foxedDiv
so that we can select them as a group and loop over them -->
<div class="foxedDiv" data-position="900,1800">
MESSAGE 1
</div>
<div class="foxedDiv" data-position="1801,2500">
MESSAGE 2
</div>
JS
//Note you do not need to make an anonymous
//function just to do the call for checkY
//just pass the function
$(window).scroll(checkY);
function checkY(){
//save this value so we dont have to call the function everytime
var top = $(window).scrollTop();
console.log(top);
$(".foxedDiv").each(function(){
var positionData = $(this).data("position").split(",");
if(top > positionData[0] && top <= positionData[1]){
console.log("Show");
$(this).show();
} else {
console.log("Hide");
$(this).hide();
}
});
}
checkY();
JSFiddle Demo
Related
I'm sure this is a trivial problem but I cannot seem to figure it out. I'm trying to fade a side bar in and out, and because I have a few of them in my website, I need to give them individual IDs for Javascript.
This code works
$(window).on("scroll", function() {
var scrollPos = $(window).scrollTop() - 100 ;
if (scrollPos < 100) {
$("#menu").fadeOut();
} else {
$("#menu").fadeIn();
}
});
This doesn't
$(window).on("scroll", function() {
var menu = document.getElementById("menu");
var scrollPos = $(window).scrollTop() - 100 ;
if (scrollPos < 100) {
menu.fadeOut();
} else {
menu.fadeIn();
}
});
In the latter piece, all I'm trying to do is assign a variable.
Here's the fiddle: https://jsfiddle.net/gavinfriel/nhovvj6q/1/
Your help would be appreciated.
You have to wrap it in a jQuery call to make it a jQuery object. Otherwise it cannot find the fadeOut and fadeIn functions:
var menu = $("#menu");
or
var menu = $(document.getElementById("menu"));
You need to use jquery to convert menu to jQuery object.
So it will have the fade property
$(window).on("scroll", function() {
var menu = document.getElementById("menu");
var scrollPos = $(window).scrollTop() - 100 ;
if (scrollPos < 100) {
$(menu).fadeOut();
} else {
$(menu).fadeIn();
}
});
Because if you use menu.fadeOut() it will generate error because menudoesn't have fade property
Checkout this it will work.
$(window).on("scroll", function() {
var menu = $("#menu");
var scrollPos = $(window).scrollTop() - 100 ;
if (scrollPos < 100) {
menu.fadeOut();
} else {
menu.fadeIn();
}
});
As others have mentioned, you've declared a JavaScript variable but are trying to use it as a jQuery object.
I would personally go with PierreDuc's answer but if you refactor your code slightly you can carry on using the vanilla JS declared vaiable, but pass the variable slightly differently:
var test = document.getElementById("test");
$(test).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="test">
TEST
</div>
In your 2nd code, this might look as follows:
$(window).on("scroll", function() {
var menu = document.getElementById("menu");
var scrollPos = $(window).scrollTop() - 100 ;
if (scrollPos < 100) {
$(menu).fadeOut();
} else {
$(menu).fadeIn();
}
});
I've found this piece of Jquery to change CSS when it reaches an anchor point.
$(window).on("scroll", function() {
var scrollPosition = scrollY || pageYOffset;
if (scrollPosition > $("#someAnchor").position().top - $(window).height()) {
alert("run code here");
}
});
The problem is it does so when the bottom of the screen reaches the anchor point, but it needs to run the code when the top touches the anchor point. How do I do this?
Hoping this works well for you:
var ranOffsetCode = false
$(window).on("scroll", function() {
var docScrollTop = $(document).scrollTop(); // Figure out how far we scrolled.
var someAnchorTop = $('#someAnchor').offset().top - $('#someAnchor').height(); // Figure out how far down the element is on the page
if (docScrollTop >= someAnchorTop) { // If we scrolled up to or past the element, fire this
if (ranOffsetCode === false) { // This makes sure we only run the function once and not every scroll
ranOffsetCode = true;
console.log('run code here'); // Functional code to execute after we scrolled down this far.
}
}
else {
ranOffsetCode = false;
}
});
Demo
Simply remove - $(window).height()
$(window).on("scroll", function() { var scrollPosition = scrollY || pageYOffset;
if (scrollPosition > $("#someAnchor").position().top) { alert("run code here"); } });
Not really meant to be an answer, but it might help:
var spam = false;
$(window).on("scroll", function() {
var scrollPosition = scrollY || pageYOffset;
$('#pos').html( 'y: '+scrollY+', a: '+$("#someAnchor").position().top + ', p: '+scrollPosition );
if (!spam && (scrollPosition > $("#someAnchor").position().top)) {
alert('hit it!');
spam = true;
}
});
Some html:
<div style="position:fixed; top:0; left:85%; width:15%; height:20px">
<span id="pos" style="font-family:Courier; font-size:0.5em; white-space:pre"></span>
</div>
I want to hide .isi-jumo-link when .indication is fully visible in the viewport. Currently it only disappears once .indication is at the top of the viewport.
User needs to scroll from the top and once .indication is fully in view then .isi-jump-link will disappear.
$(window).on('scroll', function () {
if ($(this).scrollTop() >= $('.indication').offset().top) {
$('.isi-jump-link').hide();
}
else {
$('.isi-jump-link').show();
}
});
Just to note... using a fixed scrollTop in my case will not work.
You could check if the both the top and the bottom of your indication is within the viewport:
$(window).on('scroll', function () {
var bottomIsVisible = $(this).scrollTop() + $(this).height() >= $('.indication').offset().top + $('.indication').height();
var topIsVisible = var topIsVisible = $(this).scrollTop() <= $('.indication').offset().top;
if (bottomIsVisible && topIsVisible) {
$('.isi-jump-link').hide();
}
else {
$('.isi-jump-link').show();
}
});
You need to add the height of the .indication <div> also to the equation:
$(window).on('scroll', function () {
if ($(this).scrollTop() >= ($('.indication').offset().top + $('.indication).height())) {
$('.isi-jump-link').hide();
}
else {
$('.isi-jump-link').show();
}
});
I have a "follow scroll" function, but I want it to turn off when it returns to a certain point. My code is as follows:
scrollSidebar: function(scroll) {
var elemPos = $('#bestvideos-2').offset().top,
scroll2 = scroll;
if(scroll2 >= elemPos) {
$('#bestvideos-2').animate({
'margin-top':(scroll - 315)+'px'
},0);
} else {
$('#bestvideos-2').css('margin-top','0');
}
}
$(window).scroll(function() {
var scrollHeight = $(window).scrollTop();
Scroll.scrollSidebar(scrollHeight);
})
The problem is - every time I get up, it goes way up, not following scroll. What I'm thinking is storing a variable elemPos somewhere and keep it static (now it's changing each time I scroll).
What can I do with this?
Pass the value to the scrollSidebar function - make sure that the var elemPos = $('#bestvideos-2').offset().top is executed on dom ready
scrollSidebar: function (elemPos, scroll) {
var scroll2 = scroll;
if (scroll2 >= elemPos) {
$('#bestvideos-2').animate({
'margin-top': (scroll - 315) + 'px'
}, 0);
} else {
$('#bestvideos-2').css('margin-top', '0');
}
}
var elemPos = $('#bestvideos-2').offset().top
$(window).scroll(function () {
var scrollHeight = $(window).scrollTop();
Scroll.scrollSidebar(elemPos, scrollHeight);
})
I'm new to jquery and have put together the following code to make a DIV appear after a set scroll-down amount. If scrolling back up, the DIV disappears. Optionally, once the DIV has appeared, there is a link to close it. This all works as intended, apart from that I only want the script to run once. At the moment if I scroll back up, the yellow box appears again. How can I ensure the box stays closed? As another option, could I integrate cookies or localStorage?
Many thanks! Russ.
Javascript:
$(function () {
var target = $(".box");
if ($(window).scrollTop() > 30) {
target.hide();
}
$(window).scroll(function () {
var pos = $(window).scrollTop();
if (pos > 30) {
target.stop(true, true).fadeIn('slow');
} else {
target.stop(true, true).fadeOut('slow');
}
});
$('a.close').click(function () {
$($(this).attr('href')).slideUp();
return false;
});
});
Here is the jsfiddle link to my code: jsfiddle link
You can remove the class to ensure the box stays enclosed with removeClass(). Or directly $(".box").remove() after your animation.
You can store this choice with cookie but if the client deletes his cookies, it's lost.
You can remove event scroll from window and for localStorage do something like that:
$(function () {
var target = $(".box");
if ($(window).scrollTop() > 30) {
target.hide();
}
$(window).scroll(function () {
var pos = $(window).scrollTop();
if (pos > 30) {
target.stop(true, true).fadeIn('slow');
} else {
target.stop(true, true).fadeOut('slow');
}
if(localStorage['noNotification'] == 'true'){
$(window).off('scroll');
}
});
$('a.close').click(function () {
$($(this).attr('href')).slideUp();
$(window).off('scroll');
localStorage['noNotification'] = 'true';
return false;
});
});
try this http://jsfiddle.net/AbwXu/4/
var notdisplayed=true;
$(function(){
var target = $(".box");
if($(window).scrollTop() > 30){
target.hide();
}
$(window).scroll(function(){
var pos = $(window).scrollTop();
if(pos > 30 && notdisplayed){
target.stop(true, true).fadeIn('slow');
} else {
target.stop(true, true).fadeOut('slow');
notdisplayed=false;
}
});
$('a.close').click(function() {
$($(this).attr('href')).slideUp();
notdisplayed=false;
return false;
});