i have a container that is stick to top after a specific point.
but its not enough for me.
i have a footer in the page and when the screen is small the stick part is hiding under the footer.
i want it to stop moving down in the footer top (to stop be fixed to 0 that point but be fixed to minus number that is the substraction between them).
this is my code.
what should i add for that goal?
and when to call it?
on resize?
on ready?
etc.
thanks a lot
window.onscroll = function (event) {
fixDiv();
};
function fixDiv() {
if (getBrowserHeight().width > 1284) {
var $div = $("#Container");
if ($(window).scrollTop() > $div.data("top")) {
$('#Container').css({ 'position': 'fixed', 'top': '0' });
}
else {
$('#Container').css({ 'position': 'static', 'top': 'auto' });
}
}
}
$(document).ready(function () {
$("#Container").data("top", $("#Container").offset().top);
});
This should get you going.
Don't mind to ask for help if somehting isn't clear.
$(document).ready(function() {
$(window).scroll(function() {
var footerEl = $('footer').offset().top;
var footerTop = (footerEl - $(window).scrollTop());
var containerHeight = $('.container').height();
var footerHeight = $('footer').height();
console.log('footer', footerTop);
$('.container').removeClass('sticky');
if (footerTop <= containerHeight) {
$('.container').addClass('sticky');
$('.container').css('bottom', footerHeight);
}
});
});
body {
height: 1000px;
position: relative;
}
.container {
width: 100%;
min-height: 300px;
position: fixed;
top: 0;
background: red;
}
.sticky {
position: absolute;
top: auto;
}
footer {
width: 100%;
min-height: 500px;
position: absolute;
bottom: 0;
background: black;
}
<html>
<body>
<div class="container"></div>
<footer></footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</html>
I've tried to make as few changes to your code as possible, but there's better ways to get around this ie. using classes, like in #mhx answer. Full JavaScript below (sorry, had to remove your getBrowserHeight() as it wasn't defined):
window.onscroll = function (event) {
fixDiv();
};
function fixDiv() {
var $div = $("#Container");
var $footer = $("footer");
if ($(window).scrollTop() >= $div.data("top") && $(window).scrollTop() < $footer.data("top") - $div.height()) {
$('#Container').css({ 'position': 'fixed', 'top': '0' });
}
else if ($footer.data("top") > $footer.data("top") - $div.height()) {
$('#Container').css({ 'position': 'absolute', 'top': $footer.data("top") - $div.height() });
}
else {
$('#Container').css({ 'position': 'static', 'top': 'auto' });
}
}
$(document).ready(function () {
$("#Container").data("top", $("#Container").offset().top);
$("footer").data("top", $("footer").offset().top);
});
Besides adding a top data attribute to your footer and defining $footer in the start of fixDiv(),I've added this to your initial if statement, to make sure that the scroll position, does not exceed the top of the footer minus the height of your div.
&& $(window).scrollTop() < $footer.data("top") - $div.height()
... and I've added this else if statement, in case it does exceed the top of the footer minus the height of your div
else if ($footer.data("top") > $footer.data("top") - $div.height()) {
$('#Container').css({ 'position': 'absolute', 'top': $footer.data("top") - $div.height() });
}
Here's a fiddle: http://jsfiddle.net/ds5tptay/
Related
My default values for .csw-step4-price-summary div is
.csw-step4-price-summary {
width: 270px;
position: absolute;
display: inline-block;
bottom: 661px;
right: 40px;
}
When I want to do the following, it does change position to fixed, but it does not react to bottom and right values.
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 220) {
$(".csw-step4-price-summary").css({
'position': 'fixed',
'bottom': '661',
'right': '140'
});
} else {
$(".csw-step4-price-summary").css({ 'position': 'absolute'});
}
});
Any suggestions why this might be happening? Thanks in advance.
Try using 'px' in the unit in the css function
$(".csw-step4-price-summary").css({
'position': 'fixed',
'bottom': '661px',
'right': '140px'
});
it's
'bottom': '661px',
'right': '140px'
I have this problem which is probable very simple to solve, but I'm a newbie with JS/JQuery.
I have this code (see fiddle here: https://jsfiddle.net/Tiph/6ep3hp4j/) where my div footer shows when the scroll gets at the bottom of the document, but I want it to show when the scroll gets at a certain height under my header and have a fixed position at the bottom of my window. I understand that I have to calculate something with window.height, and/of offsetTop, but nothing works.
Someone can help me with it?
Thank you so much! :-)
my code here:
var footer = $('#footer'),
extra = 10;
footer.css({ opacity: '0', display: 'block' });
$(window).scroll(function() {
var scrolledLength = ( $(window).height() + extra ) + $(window).scrollTop(),
documentHeight = $(document).height();
console.log( 'Scroll length: ' + scrolledLength + ' Document height: ' + documentHeight )
if( scrolledLength >= documentHeight ) {
footer
.addClass('bottom')
.stop().animate({ bottom: '0', opacity: '1' }, 300);
}
else if ( scrolledLength <= documentHeight && footer.hasClass('bottom') ) {
footer
.removeClass('bottom')
.stop().animate({ bottom: '-100', opacity: '0' }, 300);
}
});
I create new sample code for you to understand how its work
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function() {
var count=700;
var menuHeight = $('#footer').height()+count;
var top = $(this).scrollTop();
var bottom = $(document).height() - $(this).height() - $(this).scrollTop();
if (bottom < menuHeight) {
$('#footer').removeClass( 'top' );
$('#footer').addClass( 'bottom' );
$('#footer').fadeIn( 'slow' );
}
else {
$('#footer').fadeOut( 'slow' );
}
});
});
</script>
<meta charset="utf-8">
</head>
<body>
<style>
#footer{
width: 100%;
height: 60px;
background-color: #cccccc;
vertical-align: middle;
text-align: center;
font-size:3em;
}
.bottom{
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
display:block;
}
</style>
<div style="height:2000px;"></div>
<div id="footer" style="display:none" > This is your footer</div>
<div style="height:700px"></div>
Try to change the number 700 to set where you want to footer to be shown
Say you want the header to show when you have scrolled 100px from the top.
You can do something like:
$(window).on("scroll", function() {
if(document.body.scrollTop >= 100) {
$("#footer").fadeIn()
} else {
$("#footer").fadeOut()
}
});
Say, you want to only show the header if a button with id, callToAction is above the viewport, you can do:
$(window).on("scroll", function() {
if(document.getElementById('callToAction').getBoundingClientRect().top <= 0) {
$("#footer").fadeIn()
} else {
$("#footer").fadeOut()
}
});
This code var y = $(this).scrollTop(); get your scroll height from top.
$(window).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) { // scroll gets at a certain height
$('.bottomDiv').fadeIn();
} else {
$('.bottomDiv').fadeOut();
}
});
If I correctly understand your question you need to change documentHeight with value what you want.
Example: documentHeight = 150; not documentHeight = $(document).height();
It is good idea to rename documentHeight variable.
I would like to create a panel who scroll to top with a fixed content under.
I would like to have this effect : Curtain JS
I don't want to use Curtain JS plugin because I only need the first effect. That the first panel be scrolled and when he disappeared be deleted. In fact that's it's effect be played once.
So I try this : my test
But the content under isn't fixed.
$(document).ready(function () {
var $vertical = $('#vertical');
$(window).scroll(function () {
var s = $(this).scrollTop(),
d = $(document).height(),
c = $(this).height();
scrollPercent = (s / (d - c));
var position = (scrollPercent * ($(document).height() - $vertical.height()));
$vertical.css({
'bottom': position
});
});
});
Can I have some help please ?
Here is a working version: http://jsfiddle.net/1wtaofr2/1/
Js:
$(document).ready(function () {
var $vertical = $('#vertical');
$('body').height($('.test').height() + $vertical.height());
$(window).scroll(function () {
var s = $(this).scrollTop(),
d = $(document).height(),
c = $(this).height();
scrollPercent = (s / (d - c));
var position = (scrollPercent * ($(document).height() - $vertical.height()));
$vertical.css({
"-webkit-transform":"translateY(-"+ position +"px)"
});
if (position > $vertical.height()) {
$('.test').css({
position: 'relative',
'padding-top': $vertical.height()
})
}
if (position < $vertical.height()) {
$('.test').css({
position: 'fixed',
'padding-top': 0
})
}
});
});
Css:
body {
margin-left: 0;
}
#vertical {
position: fixed;
width: 100%;
height: 100%;
background: red;
top: 0;
left: 0;
bottom: 0;
}
.test {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
In case you want to use an external library, maybe you will find scrollr useful.
I want to stick child div to bottom when parent div touches the browser bottom.
P.S : This should happen when the parent div is pushed down not when scrolled down.
For example in my demo there is a content panel which is hidden. If you click on expand link you get to see the expanded content (which is pushing the bottom_content div to the bottom).
But accordion is just an example, there will be some other element which will be pushing the bottom_content div down. So I dont want to write stick function with reference to accordion.
It should stick down only when bottom_content div touches the bottom of the browser and when there is no much content in the page then the child div should stay as it is like child of the bottom_content
Parent div: bottom_content
Child div: footer
Here is my code currently used, which is not proper
$('.expandble_conetnt a').click(function(event){
event.preventDefault();
$(this).next('span').slideToggle();
});
//this is for stick to the bottom
var stickyHeaderbottom = $('.footer').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderbottom) {
$('.footer').css({ position: 'fixed', bottom: '0px', width: '95%', left: '2.5%' });
} else {
$('.footer').css({ position: 'static', bottom: '0px', width: '100%' });
}
});
DEMO
The whole idea is to handle .footer position on window scrolling, on window resizing and after .slideToggle() for the list is completed:
Fiddle.
var stickyHeaderbottom = $('.footer').offset().top;
$('.expandble_conetnt a').click(function()
{
$(this).next('span').slideToggle(function()
{
handleBottom();
});
return false;
});
$(window).scroll(function()
{
handleBottom();
});
$(window).resize(function()
{
handleBottom();
});
function handleBottom()
{
if ($(window).height() + $(window).scrollTop() < $(document).height())
{
$('.footer').css({ position: 'fixed', bottom: '0', width: '95%', left: '2.5%' });
}
else
{
$('.footer').css({ position: 'absolute', bottom: '0', width: '100%', left: 0 });
}
}
Edit. Updated fiddle without weird footer jumping after list opening.
var stickyHeaderbottom = $('.footer').offset().top;
$('.expandble_conetnt a').click(function()
{
var toggledElement = $(this).next('span');
handleBottom(toggledElement.height());
toggledElement.slideToggle(function()
{
handleBottom();
});
return false;
});
$(window).scroll(function()
{
handleBottom();
});
$(window).resize(function()
{
handleBottom();
});
function handleBottom(additionalHeight)
{
var pageHeight = $(document).height();
if (additionalHeight)
{
pageHeight += additionalHeight;
}
if ($(window).height() + $(window).scrollTop() < pageHeight)
{
$('.footer').css({ position: 'fixed', bottom: '0', width: '95%', left: '2.5%' });
}
else
{
$('.footer').css({ position: 'absolute', bottom: '0', width: '100%', left: 0 });
}
}
you can make js on.change to change that div position to absolute and bottom:0 left:0
I have a vertically oriented vertical navigation bar, that I would like to make stop at the end of #contact. It will need to resume scrolling again if the user scrolls back up.
What is the best way to achieve this?
javascript being used:
$(function() {
$.fn.scrollBottom = function() {
return $(document).height() - this.scrollTop() - this.height();
};
var $el = $('#nav>div');
var $window = $(window);
var top = $el.parent().position().top;
$window.bind("scroll resize", function() {
var gap = $window.height() - $el.height() - 10;
var visibleFoot = 340 - $window.scrollBottom();
var scrollTop = $window.scrollTop()
if (scrollTop < top + 10) {
$el.css({
top: (top - scrollTop) + "px",
bottom: "auto"
});
} else if (visibleFoot > gap) {
$el.css({
top: "auto",
bottom: visibleFoot + "px"
});
} else {
$el.css({
top: 0,
bottom: "auto"
});
}
}).scroll();
});
jsfiddle
I believe this is the code you are looking for:
$(function() {
var $Nav = $('#Nav');
var $window = $(window);
var $contact = $('#contact');
var maxTop = $contact.offset().top + $contact.height() - $Nav.height();
window.navFixed = 1;
$window.bind("scroll resize", function() {
var currentTop = $window.scrollTop();
if (currentTop <= maxTop && window.navFixed == 0) {
$Nav.css({
position: 'fixed',
top: '5%'
});
window.navFixed = 1;
} else if (currentTop > maxTop && window.navFixed == 1) {
$Nav.css({
position: 'absolute',
top: maxTop
});
window.navFixed = 0;
}
}).scroll();
});
The #Nav element contains the CSS you had originally specified: position: fixed; top: (...). When the document is ready, the variable maxTop is calculated based on the #contact element's top and height.
On the scroll and resize event, the variable currentTop is calculated as the current scroll position. If this value is lower than maxTop, then #Nav is set to the original CSS; if the value is higher, new CSS styles are applied: position: absolute; top: maxTop;
window.navFixed is used to prevent the CSS to be constantly updated while scrolling. I'm sure that bit can be improved, however, it demonstrates its purpose.
Check out the JSFiddle for the full HTML..
PS. There's a minor bug in your code, where #Nav refers to the <ul> element, rather than the <nav> element. However, the moving element is the <ul>, when it should be <nav>.