Hello People what I need is get offset for any section then make position of all sections is absolute:
the problem that all sections return with 0px of offset
$(document).ready(function () {
$('section').each(function (index, element) {
var $this = $(this);
$this.css('top', $this.offset().top + 'px');
$this.css('position', 'absolute');
});
})
section {
width: 100%;
height: 400px;
background-color:#ff5b74;
}
.section-2{
height:500px;
background-color:#00ff6b;
}
.section-3{
background-color:#5066e9;
}
.section-4{
background-color:#ff6a00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="section-1"></section>
<section class="section-2"></section>
<section class="section-3"></section>
<section class="section-4"></section>
The problem is that for each section you set the position absolute which makes it out of the flow before you change the remaining sections. so the remaining sections will ignore the space taken by this section and fill it.
That's why they all take the same top position
You need to set the absolute position after you complete setting the top position for all sections, meaning outside the loop function.
$(document).ready(function() {
$('section').each(function(index, element) {
var $this = $(this);
$this.css('top', $this.offset().top + 'px');
});
$('section').css('position', 'absolute');
})
section {
width: 100%;
height: 400px;
background-color: #ff5b74;
}
.section-2 {
height: 500px;
background-color: #00ff6b;
}
.section-3 {
background-color: #5066e9;
}
.section-4 {
background-color: #ff6a00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="section-1"></section>
<section class="section-2"></section>
<section class="section-3"></section>
<section class="section-4"></section>
The problem you are facing is as soon as you are in the each loop and set the first element to position: absolute; it will lose it's height cause it is position: absolute; Or that's what position: absolute; does. It takes element out of the flow.
Elements that are positioned relatively are still considered to be in
the normal flow of elements in the document. In contrast, an element
that is positioned absolutely is taken out of the flow and thus takes
up no space when placing other elements. Information from here here
Sooo to accomplish you need to set the height by the height and the position of the previous element.
$(this).prev().offset().top + $(this).prev().outerHeight()
I left the console.log() there if you are interested to see the different values.
$(document).ready(function () {
$('section').each(function (index, element) {
// console.log(
// $(this).offset().top,
// $(this).outerHeight(),
// ($(this).offset().top + $(this).outerHeight()),
// ($(this).prev().offset().top + $(this).prev().outerHeight())
// );
$(this).css('top', $(this).prev().offset().top + $(this).prev().outerHeight() + 'px');
$(this).css('position', 'absolute');
});
})
section {
width: 100%;
height: 400px;
background-color:#ff5b74;
}
.section-2{
height:500px;
background-color:#00ff6b;
}
.section-3{
background-color:#5066e9;
}
.section-4{
background-color:#ff6a00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="section-1"></section>
<section class="section-2"></section>
<section class="section-3"></section>
<section class="section-4"></section>
<style>
section {
width: 100%;
height: 400px;
background-color:#ff5b74;
}
.section-2{
height:500px;
background-color:#00ff6b;
}
.section-3{
background-color:#5066e9;
}
.section-4{
background-color:#ff6a00;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="section-1"></section>
<section class="section-2"></section>
<section class="section-3"></section>
<section class="section-4"></section>
<script>
$(document).ready(function () {
$('section').each(function (index, element) {
var $this = $(this);
if (index != 0) {
$this.css('top', (Number($this.offset().top)+Number($('.section-'+(Number(index)+1)).height())) + 'px');
}
$this.css('position', 'absolute');
});
})
</script>
Related
I have fixed sidebar which should scroll along with main content and stop at certain point when I scroll down. And vise versa when I scroll up.
I wrote script which determines window height, scrollY position, position where sidebar should 'stop'. I stop sidebar by adding css 'bottom' property. But I have 2 problems with this approach:
When sidebar is close to 'pagination' where it should stop, it suddenly jumps down. When I scroll up it suddenly jumps up.
When I scroll page, sidebar moves all the time
Here's my code. HTML:
<div class="container">
<aside></aside>
<div class="content">
<div class="pagination"></div>
</div>
<footer></footer>
</div>
CSS:
aside {
display: flex;
position: fixed;
background-color: #fff;
border-radius: 4px;
transition: 0s;
transition: margin .2s, bottom .05s;
background: orange;
height: 350px;
width: 200px;
}
.content {
display: flex;
align-items: flex-end;
height: 1000px;
width: 100%;
background: green;
}
.pagination {
height: 100px;
width: 100%;
background: blue;
}
footer {
height: 500px;
width: 100%;
background: red;
}
JS:
let board = $('.pagination')[0].offsetTop;
let filterPanel = $('aside');
if (board <= window.innerHeight) {
filterPanel.css('position', 'static');
filterPanel.css('padding-right', '0');
}
$(document).on('scroll', function () {
let filterPanelBottom = filterPanel.offset().top + filterPanel.outerHeight(true);
let bottomDiff = board - filterPanelBottom;
if(filterPanel.css('position') != 'static') {
if (window.scrollY + window.innerHeight - (bottomDiff*2.6) >= board)
filterPanel.css('bottom', window.scrollY + window.innerHeight - board);
else
filterPanel.css('bottom', '');
}
});
Here's live demo on codepen
Side bar is marked with orange background and block where it should stop is marked with blue. Than you for your help in advance.
I solved my problem with solution described here
var windw = this;
let board = $('.pagination').offset().top;
let asideHeight = $('aside').outerHeight(true);
let coords = board - asideHeight;
console.log(coords)
$.fn.followTo = function ( pos ) {
var $this = this,
$window = $(windw);
$window.scroll(function(e){
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
});
};
$('aside').followTo(coords);
And calculated coordinates as endpoint offset top - sidebar height. You can see solution in my codepen
I'm trying to make a website where the penultimate section takes a fixed position and the last one goes over. However, the goal is for the last section to never be halfway through. To do this, after the penultima section is in a fixed position, I detect if the scroll comes from above. If it comes, at a certain point the page scrolls to the bottom. I'm having problems here because when the page does do the animation of scrolling the last section gets stuck. Can you help me?
function fixe_section(scrollTopPx){
if(scrollTopPx>$('.section2').offset().top){
$('.section2 div').css({'position':'fixed', 'bottom':'0', 'z-index':'-1'});
}
else{
$('.section2 div').css({'position':'static', 'z-index':'0'});
}
}
$(window).scroll(function(event){
scrollTopPx = $(window).scrollTop();
fixe_section(scrollTopPx);
});
section_move();
function section_move(){
var start_mov = $('.section2').offset().top+$('.section2').height()/2;
var move_to = $('.section3').offset().top+$('.section3').height();
var lastScrollTop = 0;
$(window).scroll(function () {
var st = $(this).scrollTop();
if(st>lastScrollTop){
if(st>start_mov){
$("html, body").animate({
scrollTop: move_to
}, 600);
return false;
}
}
lastScrollTop = st;
});
}
section {
width: 100%;
height: 600px;
position: relative;
}
section div{
width: 100%;
height: 100%;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section1">
<div class="green"></div>
</section>
<section class="section2">
<div class="red">TESTING</div>
</section>
<section class="section3">
<div class="blue"></div>
</section>
How can I make a div fixed /scroll within the confines of the parent element.
I have tried using various javascript functions to try and achieve this to no avail either they dont accommodate the height of the container/parent div or simply don't work-what I am trying to achieve is when the window scrolls to 60px above the red scrolling div(seen in image), it should become fixed(preferably retaining it's width) ntil it meets with the bottom of the parent/container div and then becomes position absolute within the relative parent div at "bottom:20px" the div is relatively positioned and cannot have a scroll bar and the red div has a height smaller than that of the parent div ... it is in fixed.Are there any javascript and/or css solutions to this problem?
here is something that I have tried
javascript:
var windw = this;
$.fn.followTo = function ( elem ) {
var $this = this,
$window = $(windw),
$bumper = $(elem),
bumperPos = $bumper.offset().top,
thisHeight = $this.outerHeight(),
setPosition = function(){
if ($window.scrollTop() > (bumperPos - thisHeight)) {
$this.css({
position: 'absolute',
top: (bumperPos - thisHeight)
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
};
$window.resize(function()
{
bumperPos = pos.offset().top;
thisHeight = $this.outerHeight();
setPosition();
});
$window.scroll(setPosition);
setPosition();
};
$('#one').followTo('#two');
html:
<body>
<div id="container" style="width:200px;">
<div id="one">FIXED...</div>
<div id="two">...BUT STOPS HERE</div>
</div>
</body>
css:
body, html{
height:200%;
}
#one {
width:100%;
height: 200px;
background-color: aqua;
position: fixed;
}
#two {
width: 100%;
height:50px;
background-color: red;
margin-top:150%;
position:absolute;
}
I am trying to, sort of, emulate the effect here. Essentially, during scrolling, change the css (drop shadow), and when the element comes back to original position (remove shadow).
I am able to detect scroll, but not able to figure out how to detect the return to the original un-scrolled state.
HTML
<div id="container">
<ul>
<li id="one">el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li>
</ul>
</div>
CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
height: 100px;
width: 500px;
border: 1px solid #000000;
overflow: scroll;
}
JS (with jquery)
var p = $('#one');
var position0 = p.position().top;
$('#container').scroll(function () {
if (p.position().top != position0) {
console.log('p.position: ' + p.position().top);
$('#container').css('background-color', 'pink');
}
});
JSFIDDLE: http://jsfiddle.net/nrao89m3/
PS: From console.log it doesn't seem to return to its original value at all.
Just add an else block:
var p = $('#one');
var position0 = p.position().top;
$('#container').scroll(function () {
if (p.position().top != position0) {
console.log('p.position: ' + p.position().top);
$('#container').css('background-color', 'pink');
} else {
$('#container').css('background-color', 'white');
}
});
http://jsfiddle.net/vyjbwne2/
I have the following code:
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script>
$(window).on("scroll",function(e){
var sidepos = parseFloat($('#footer').offset().top - $('#side').outerHeight());
if($(window).scrollTop() > 100 && $('#side').offset().top < sidepos) {
$('#side').css('position','fixed');
$('#side').css('top','0');
}
else if($(window).scrollTop() > 100 && $('#side').offset().top >= sidepos) {
$('#side').css('position','absolute');
$('#side').css('top','' + sidepos + 'px');
}
else if($(window).scrollTop() < 100) {
$('#side').css('position','');
$('#side').css('top','');
}
});
</script>
</head>
<body>
<div id="header"></div>
<div id="body">
<div id="side"></div>
</div>
<div id="footer"></div>
</body>
</html>
I want to keep the #side fixed while scrolling till before the #footer so that it doesn't overlap with it.
Now there are 2 problems:
If you scroll down quickly like pressing 'end' button on keyboard, the function will not execute and the side overlaps with the #footer ignoring the if condition.
After switching to position:absolute can't figure out how to fix again when scrolling up and the #side becomes permanently sticking with the #footer even if you scroll up again.
I created a fiddle for you to test: http://jsfiddle.net/JuD5h/
Here is your updated fiddle: http://jsfiddle.net/JuD5h/4/.
I made some changes to CSS:
#body {
height: 3000px;
position: relative;
}
#side {
width: 100px;
height: 350px;
float: left;
border: 1px solid #000000;
position: absolute;
top: 0;
}
And here is the updated Javascript:
$(function(){ // document ready
var maxAbsoluteTop = $('#body').outerHeight() - $('#side').outerHeight();
var minAbsoluteTop = 0;
$(window).scroll(function(){
var windowTop = $(window).scrollTop();
var actualTop = windowTop - 100;
if ( actualTop <= maxAbsoluteTop && actualTop >= minAbsoluteTop) {
$('#side').css({ top: windowTop - 100 });
} else if (actualTop > maxAbsoluteTop){
$('#side').css({ top: maxAbsoluteTop });
} else {
$('#side').css({ top: minAbsoluteTop });
}
});
});
Use of position: absolute has made the animation flickery but I hope that is something you can fix using a small delay.