Here is the complete code http://jsfiddle.net/vinex08/uhm26em1/
jQuery(function ($) {
var distance = $('.c').offset().top,
$window = $(window);
$window.scroll(function () {
if ($window.scrollTop() >= distance) {
$(".b").css({
position: 'fixed',
top: '0'
});
} else {
$(".b").css({
position: 'inherit',
top: '10'
});
}
});
});`
It's working on Chrome and Firefox but when i checked it via iPad AIR and iPhone, the effect executes even before the 'class c' hits the top.
I hope this will help:
jQuery(function ($) {
var distance = $('.c').offset().top;
$(window).scroll(function () {
var wndwTop = $(this).scrollTop();
if (wndwTop >= distance) {
$(".b").css({
position: 'fixed',
top: '0'
});
} else {
$(".b").css({
position: 'inherit',
top: '10'
});
}
});
});
Here we have known fix for mobile Safari.
Firstly, detect browser; secondly, a little bit change behavior of the 'offset' function:
// mobile Safari reports wrong values on offset()
// http://dev.jquery.com/ticket/6446
if ( /webkit.*mobile/i.test(navigator.userAgent)) {
(function($) {
$.fn.offsetOld = $.fn.offset;
$.fn.offset = function() {
var result = this.offsetOld();
result.top -= window.scrollY;
result.left -= window.scrollX;
return result;
};
})(jQuery);
}
Place this code somewhere after jquery initialization, but before your offset computations.
Related
I want to run certain javascript only when the window width is over 1024.
The script is long. I've tried to combine them with
if ($(window).width() >= 1024
but it still not working.
Can someone help me?
This is the script I want to run when the width is over 1024 :
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(window).load(function() {
$(window).on("scroll resize", function() {
var pos = $('#fixPlace').offset();
$('.post').each(function() {
if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
var newDescr = $(this).find('.feature__description').html();
var oldDescr = $("#fixPlace").html();
$('#fixPlace').html(newDescr);
if (newDescr !== oldDescr) {
$("#fixPlace").css('opacity', 0.4).animate({ 'opacity': '1', }, 200);
return;
}
}
});
});
$(document).ready(function() {
$(window).trigger('scroll');
});
});
let fixPlace = '#fixPlace';
let scrollStart = null;
let scrollEnd = null;
let floatBoxTop = 0.25 * $(window).height();
$(document).ready(function() {
scrollStart = $('#fixPlace').offset().top;
scrollEnd = $('.transition').offset().top - 680;
})
$(window).scroll(scroll)
function scroll() {
let scrollTop = $(document).scrollTop() + floatBoxTop;
scrollTop = Math.min(scrollEnd, Math.max(scrollTop, scrollStart))
if (scrollTop === scrollStart || scrollEnd === scrollTop) {
$(fixPlace).css({
position: 'absolute',
top: scrollTop
});
} else {
$(fixPlace).css({
position: 'fixed',
top: floatBoxTop
});
}
}
I want a div follow as you scroll when you are on a screen wider than 991. On a screen size smaller i want the div fixe. And i want the javascript code refresh every time someone load or resize the page.
Here my code (it's not dry...).
My problem is when i resize the window (desktop screen -> mobile screen -> desktop screen...):
1 - on mobile screen i can't go at the bottom of the page
2 - on desktop screen i have a problem when i scroll the page
//when the page is load and the window resize detect if it's a smallscreen
var smallscreen = true;
$(window).on("resize load", function() {
if ($(window).width() > 991) {
smallscreen = false;
}
else {
smallscreen = true;
};
//if it's not a small screen activate the scrolling
if (smallscreen == false) {
$.fn.followTo = function ( pos ) {
var $this = this,
$window = $(window);
$window.scroll(function(e){
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
}
else {
$this.css({
position: 'fixed',
top: 180
});
};
});
};
$('#checkout_validation').followTo(400);
}
else {
$.fn.followTo = function ( pos ) {
var $this = this,
$window = $(window);
$window.on("resize scroll load", function(e){
if ($window.scrollTop() > pos) {
$this.css({
position: 'initial',
width: '100%',
top: 0
});
}
else {
$this.css({
position: 'initial',
width: '100%',
top: 0
});
};
});
};
$('#checkout_validation').followTo(0);
};
});
Here's my working code. Thanks you #iMatoria for having dried it.
//when the page is load and the window resize detect if it's a smallscreen
var smallscreen = true;
$.fn.followTo = function(pos) {
var $this = this,
$window = $(window);
$window.on("resize scroll", function(e) {
function positionByScreen(positionForBiggerScreen, topOffsetForBiggerScreen) {
if (smallscreen == false) {
//alert('bigcreen scroll end');
$this.css({
position: positionForBiggerScreen,
top: topOffsetForBiggerScreen
});
} else {
//alert('smallscreen no scroll end ');
$this.css({
position: 'inherit',
top: 0
});
}
}
if ($window.scrollTop() > pos) {
positionByScreen("absolute", pos);
} else {
positionByScreen("fixed", 180);
};
});
};
$(window).on("resize load", function() {
smallscreen = !($(window).width() > 991);
//if it's not a small screen activate the scrolling
$('#checkout_validation').followTo(smallscreen ? 0 : 400);
//var d = document.getElementById("checkout_validation");
//d.className += " otherclass";
});
I've created a sticky sidebar function which works perfectly in chrome and safari but not in Firefox. From what I can tell it's not returning properly when it should be.
Consider a snippet of the code in question:
if (scrolling_down && bottom_offset <= bottom_padding) {
$item.css({
position: 'absolute',
top: 'auto',
bottom: bottom_padding
});
console.log(1);
return false;
console.log(2);
}
console.log(3);
The console in Chrome logs 3 until it hits the bottom of the page then logs 1 for the rest of the scroll.
In Firefox however, the console logs 3 until it hits the bottom then alternates between 3 and 1.
I'm pretty sure it should be ignoring 3 (because of the return false) once it's hit the bottom, like Chrome.
Full Javascript:
// Sticky Sidebars
stickyAsides: function() {
var $item = $('.js-sticky'),
$parent = $item.parent(),
last_scroll = 0,
scrolling_down = false;
function setStyles() {
$item.css({
width: $item.outerWidth()
});
}
function stick() {
var parent_rect = $parent.get(0).getBoundingClientRect(),
parent_top = parent_rect.top,
parent_bottom = parent_rect.bottom,
item_rect = $item.get(0).getBoundingClientRect(),
item_top = item_rect.top,
item_bottom = item_rect.bottom,
bottom_offset = parent_bottom - item_bottom,
bottom_padding = parseInt($parent.css('padding-bottom'));
scrolling_down = (last_scroll < w.scroll) ? true : false;
setStyles();
if (scrolling_down && bottom_offset <= bottom_padding) {
$item.css({
position: 'absolute',
top: 'auto',
bottom: bottom_padding
});
console.log(1);
return false;
console.log(2);
}
console.log(3);
if (item_top <= -10 || parent_top <= 0) {
$item.css({
position: 'fixed',
top: '0',
bottom: 'auto'
});
}
if (!scrolling_down && parent_top > 0) {
$item.css({
position: 'relative',
top: '0',
bottom: 'auto'
});
}
last_scroll = w.scroll;
}
$(window).on('scroll', function(){
w.scroll = $doc.scrollTop();
if (Modernizr.mq('(min-width: 1024px)') && Modernizr.flexbox) {
stick();
}
});
}, // End stickyAsides()
EDIT: Codepen Example: http://codepen.io/jhealey5/pen/JGLjPN - However this seems to work okay, so there is something else interfering on the page. I don't expect anyone to solve it but there might be some advice. I'm unable to link to the live page at this time I'm afraid.
Seems Firefox wasn't doing calculations correctly. Adding +20px to the bottom padding calculation seems to fix it.
Hey so i was trying to get my navigation to animate down after a certain div has passed but its not working properly. not sure why. it works when sliding down although a bit buggy(sometimes there seems to be a delay before it slides down and other times it slides down properly immediately). It also does not slide up it justs removes it self.
what am i doing wrong?
here is my code:
$(window).scroll(function () {
targetScroll = $('#scroll_verder').position().top,
currentScroll = $('html').scrollTop() || $('body').scrollTop();
if(currentScroll>=targetScroll){
$('.navbar').addClass('show-menu').animate({ top: '0px' });
}
else {
$('.navbar').stop();
$('.navbar').removeClass('show-menu');
$('.navbar').animate({ top: '-50px' });
}
});
Had a look at your code on the link you posted. This should do the trick:
var reachedTarget = false; // Prevent animation collisions with this
var targetScroll = $('#scroll_verder').position().top;
$(window).scroll(function () {
var currentScroll = $('html').scrollTop() || $('body').scrollTop();
if ( currentScroll >= targetScroll ) {
if ( !reachedTarget ) {
$('.navbar').stop();
$('.navbar').addClass('show-menu').animate({ top: '0px' });
}
reachedTarget = true;
} else{
if ( reachedTarget ) {
$('.navbar').stop();
$('.navbar').removeClass('show-menu').animate({ top: '-50px' });
}
reachedTarget = false;
}
});
EDIT: In CSS (to make sure initial position is correct):
.navbar.show-menu {
z-index: 999;
display: block;
top : -50px;
}
I've managed to get this far and it works great for solid width divs but can't work out how to manipulate it to work when the width of the div changes.
Question: How do I make this function take into account the different div widths after each 'round'?
var horizontalScroller = function($elem) {
var left = parseInt($elem.css("left"));
var temp = -1 * $('#horizontalScroller li').width();
if(left < temp) {
left = $('#horizontalScroller').width();
$elem.css("left", left);
}
$elem.animate({ left: (left-60) }, 2000, 'linear', function () {
horizontalScroller($(this));
});
}
$(document).ready(function() {
var i = 0;
$("#horizontalScroller li").each(function () {
$(this).css("left", i);
i += $(this).width();
horizontalScroller($(this));
});
});
Working example (with fixed width): http://jsfiddle.net/GL5V3/
Working example (with different widths): http://jsfiddle.net/wm9gt/
Well this was mildly fun, understood how your code works, but before I did that...
I rewritten it to this: (working fiddle)
function horizontalScroller(ulSelector) {
var horizontalSpan=0;
var collection=[];
function animate(index) {
var cur=collection[index];
var left=parseInt(cur.elem.css('left'));
if(left < cur.reboundPos) {
left+=horizontalSpan;
console.log(left);
cur.elem.css('left',left);
}
cur.elem.animate(
{ left: (left-60) },
2000,
'linear',
function () {animate(index)}
);
}
$(ulSelector).find('li').each(function() {
var $this=$(this);
var width=$this.width();
$this.css('left',horizontalSpan);
collection.push({reboundPos: -1 * width, elem: $this});
horizontalSpan+=width;
animate(collection.length-1);
});
console.log(collection);
console.log(horizontalSpan);
}
$(document).ready(function() {
horizontalScroller('#horizontalScroller');
});
Then I went back to your code and did this:
var horizontalSpan = 0;// swapped i for a "global" variable
var horizontalScroller = function($elem) {
var left = parseInt($elem.css("left"));
var temp = -1 * $elem.width();// updated to the correct width
if(left < temp) {// now out of bounds is properly calculated
left += horizontalSpan;// proper "wrapping" with just one addition
$elem.css("left", left);
}
$elem.animate({ left: (left-60) }, 2000, 'linear', function () {
horizontalScroller($(this));
});
}
$(document).ready(function() {
$("#horizontalScroller li").each(function () {
$(this).css("left", horizontalSpan);// horizontalSpan!!!
horizontalSpan += $(this).width();// horizontalSpan!!!
horizontalScroller($(this));
});
});
If you've got questions or want to tweak it a bit. I'd be happy you to help you along. But my hopes are that you will manage on your own.
P.S. My initial comment was rude, you're horizontal scrolling is ok thumbs up (but you were hoping the values for some of those .width() calls to be way different)