I've added a sticky 'call to action' bar to my site, it works like a sticky navigation, however it's stuck to the bottom of the window its original position in the page is scrolled past, then it jumps back in to the flow of the document.
It uses a CSS class '.sticky' to add the fixed position when the scroll position is less than the vertical position of the bar's original position.
The issue is, when I resize the page I get a nasty flicker and the bar more often than not disappears from view.
The code I am using is below...
(function() {
$(window).on('resize', function() {
var stickyNavTop = $('#wrap-bar').offset().top;
var stickyNav = function(){
var scrollBottom = $(window).scrollTop() + $(window).height() - $('.cta-bar').height();
if (scrollBottom < stickyNavTop) {
$('#wrap-bar').addClass('sticky');
$('#wrap-bar-dummy').show();
} else {
$('#wrap-bar').removeClass('sticky');
$('#wrap-bar-dummy').hide();
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
$(document).ready(function() {
$(window).trigger('resize');
});
})(jQuery);
Can anyone point me in the right direction as to what I need to change to get the bar to stop flickering when resizing?
Thanks.
The flickering you're reporting is most likely because Javascript isn't rendering your DOM changes as quickly as you scroll. As mentioned by #Switching Brains, attempt using CSS to absolutely position your footer at 0px from the bottom of the window. Then, you'll only need Javascript to locate when you've reached the bottom of the page, then apply your class to hold it in a fixed position.
A realy dirty example of this, but you'll get the idea:
HTML
<div id="body">
<div id="bar">Bar at the bottom</div>
</div>
CSS
html, body {
height:100%;
widht:100%;
}
#body {
position:relative;
height:100%;
border:1px solid #000000;
}
#bar {
position:absolute;
bottom:20px;
width:300px;
left:50%;
margin-left:-150px;
background-color:#cccccc;
}
http://jsfiddle.net/Auc6n/
I found with Mozilla that .resize() caused a lot of page flickering as it was being driven too hard.
I used:
$window.resize(throttle(500,function(){
Related
I am trying to solve this issue with jQuery/Javascript:
When the browser scrolls down and the bottom of the window reaches the top of the footer DIV, action a CSS code change.
Example of problem:
https://elodywedding.com/blog
(Ensure your browser window is mobile-sized.)
If you scroll down to footer on a smaller resolution, the footer floats statically and sits above the "tags" DIV. I would need to set position back to absolute.
Any ideas how to detect when the scrolling causes the window to reach the top of the footer DIV?
Something like this appears to work: https://jsfiddle.net/zk49cuy7/
<style type="text/css">
#body {
height:1500px;
background-color:red;
}
#footer {
height:200px;
background-color:blue;
}
</style>
<div id="body"></div>
<div id="footer"></div>
jQuery(function($){
$(window).bind('scroll', function(e){
if($(window).scrollTop() + window.innerHeight >= $('#footer').offset().top)
{
console.log('BOTTOM');
}
else
{
console.log('NOT BOTTOM');
}
});
});
Binding to window scroll and checking whether the scroll top + window height is greater than the offset top of the footer.
When i add resizable to a div fixed to bottom of page the div jumps to the top of the page on resize - I want it to stay fixed at the bottom but resize upwards.
I'm sure its something simple but not simple enough for me right now!
Here is a fiddle showing my problem
<div class="resize">
$('.resize').resizable({handles: 'n'});
.resize{
position:fixed;
bottom:0px;
width:100%;
background-color:#aaaaaa;
height:100px;
}
.ui-resizable-n {
background-color:red;
width:5px;
height:5px;
}
https://jsfiddle.net/gnz96vhy/
Any pointers gratefully received.
I made it work. I solved it by adding the distace that the div needed from the top. I also made a jQ script for that so the distance the top will be correct even if the window is resized. Hope this was the solution you wanted! =)
function disToTop() {
var windowHeight = $(window).height(),
resizeHeight = $("#div2").height(),
difference = windowHeight - resizeHeight;
$("#div2").css("top", difference);
}
https://jsfiddle.net/gnz96vhy/4/
I am trying to create a nav bar that is down 500px from the top of the page, but once you scroll down to it, it becomes fixed at the top, like this
Originally I had the following code:
$(window).scroll(function() {
if ($(document).scrollTop() > 500) {
$nav.addClass('fixed');
}
else {
$nav.removeClass('fixed');
}
});
and
.fixed {
position: fixed;
top: 0;
z-index: 1;
}
However, my page is responsive and the nav bar will not always be 500px down the page. Therefore, I used .offset().top to trigger the fixed class when scrolling reaches the top of my nav bar.
$(window).scroll(function() {
var $navTop = $nav.offset().top;
if ($(document).scrollTop() > $navTop) {
$nav.addClass('fixed');
}
else {
$nav.removeClass('fixed');
}
});
The issue is that the nav bar flickers terribly when you scroll. I tried replacing .offset() with .position(), which gets rid of the flicker, but it keeps the nav bar fixed for longer than it should when scrolling back up past its original position. Please, help!
I don't see the issue on my computer (chrome & mac) but I have a likely guess.
My guess is that this is caused by something similar to layout thrashing. It is super gross to be adding / removing the class even if it isn't changing state. Since you are reading the offset from the DOM, and then setting a class / removing a class on every scroll tick (tons of times a second), this would be a likely cause of flicker.
So I have been creating a simple animation that copies a div, and expands it over the window. I am trying to optimize it so it's less choppy and was wondering if someone could help me out. So I have been reading that you cannot have any padding or margin settings on the element that is being animated, because that will slow everything down. This is the animation function I am using:
$('.content_cell').on('click', function(event) {
var $clonedElement = $( this ).clone(true).attr('class','cloned_object content_cell').appendTo('#mainContentTable');
$clonedElement.css({left:$(this).position().left,
top:$(this).position().top,
opacity:0}) ;
//Position caching for closing animation
selectedPos = $(this).position();
var currPos= $('#invitedToChatCell').position();
//Now animate the cloned element to the correct size
$clonedElement.animate({
height:640, width:700,
//position:'absolute',
left:currPos.left,
top:currPos.top,
opacity:1.0
}, 500, function(){ $('.cloned_object > ul').toggle(); });
event.stopPropagation();
});
The content cell CSS and cloned_object css look like this
.content_cell {
border-style: solid;
cursor:pointer;
width:300px;
height:300px;
overflow:auto;
}
.cloned_object{
position:absolute;
background-color:white;
width:300px;
height:300px;
}
does anyone see why this is such a slow animation? or anything I could do to speed it up? Thanks in advance...
UPDATE:
Here is a JSFiddle link
More than just simple JQuery animations tend to be "laggy".
I use css-animations/css-transforms wherever possible.
What you can do is clone the div with jquery and put it on the screen with some new css classes. Let the css handle the expand-part.
For css examples and good ideas see: http://daneden.me/animate
Just found another thread about this which explains the css part: Expand div from the middle instead of just top and left using CSS
I am trying to make a fixed div appear after the user scrolls 100px down on a page, and disappears again when the scroll past that 100px to the top.
I would like to use a opacity fade transition of 0.5s when the div appears to make a nice transition.
Have been trying to do this but can only seem to get it to appear as soon as the user scrolls using this code:
Would love to hear from someone who has the solution.
Thanks! :)
Here is a start http://jsfiddle.net/ZtGK6/
$(window).scroll(function(){
if($(window).scrollTop()>100){
$("#theDiv").fadeIn();
}else{
$("#theDiv").fadeOut();
}
});
A good way to make it hide on page load is to give the surrounding div CSS class a display: none; property. That way it will display hidden when the page initially loads, and not fade out quickly upon page load. Then, your JavaScript will load it after you scroll down the determined # of pixels. This will behave cleanly and is super easy to achieve.
HTML:
<div id="theDiv">Now I'm visible</div>
CSS:
body, html {
height: 200%;
}
#theDiv{
top: 30px;
left: 20px;
display: none;
background-color:#FFF000;
width:200px;
height:200px;
}
Javascript:
$(window).scroll(function(){
if($(window).scrollTop()>100){
$("#theDiv").fadeIn();
}else{
$("#theDiv").fadeOut();
}
});
Demo: http://jsfiddle.net/waitinforatrain/ZtGK6/3/
$(function() {
var theDiv = $('#myDiv'),
scrollPos = $('body').scrollTop();
if ( scrollPos > 100 ) {
theDiv.fadeIn(500); // 500 milliseconds
} else {
theDiv.fadeOut(500);
}
});
I haven't been able to test this and you may have to put the if statement in a scroll event so the scrollPos var updates as you scroll.