固定边栏与相对高度和流体绝对过渡 [英] Fixed Sidebar with Relative height and Fluid Absolute Transitioning
问题描述
我期望获得一个固定的侧边栏，它将滚动到div的底部，然后转变为一个绝对定位的元素，以阻止它继续下去。
当您向上滚动时，侧边栏返回到固定位置。侧边栏需要继承与其旁边的列相同的高度，以便固定边栏看起来不奇怪。当屏幕被调整大小以匹配列时，侧边栏的大小需要改变。
到目前为止，我已经能够：
- 创建继承列高度的代码并将其应用于div。
- 创建重新计算高度的代码在窗口调整大小。
- 使代码从固定位置改变为 - >绝对，反之亦然
我已经让代码计算了div应该滚动多少，但这是我碰到的问题：
我正在寻找索姆e帮助制作计算距离的脚本，它也应该滚动调整大小以创建无缝体验。
以及在计算使用正确方程时的一些帮助，以便在浏览器窗口的所有实例中正确显示。
Javascript
$（document）.ready（function（）{
var offsetHeight = document.getElementById（'main-column'）。offsetHeight;
document.getElementById（'main-sidebar'）。style.height = offsetHeight +'px';
function updateHeight ）{
var offsetHeight = document.getElementById（'main-column'）。offsetHeight;
document.getElementById（'main-sidebar'）。style.height = offsetHeight +'px';
}
$ b $（window）.resize（updateHeight）.trigger（'resize'）
$（window）.bind（'scroll'，function（）{
if（$（window）.scrollTop（）> = 40 + $（'＃main-sidebar'）。offset（）。top + offsetHeight - window.innerHeight）{
$（'。sidebar- '）。addClass（'scroll'）;
} else {
$（侧栏缠绕。）removeClass（滚动）。
}
}）;
}）;
HTML
< div class =main-page>
< div class =row-2col-left>
< div class =columnid =main-column>
<？php
if（function_exists（'yoast_breadcrumb'））{
yoast_breadcrumb（'
< p id =breadcrumbs>'，'< / p> ;
'）;
}
？>
<？php if（have_posts（））：
while（have_posts（））：
the_post（）;
the_content（）;
endwhile;
endif; ？>
< / div>
< div class =sidebarid =main-sidebar>
< div class =sidebar-wrapid =sidebar-wrap>
<？php get_sidebar（'sidebar-1'）; ？>
< p>测试< / p>
< / div>
< / div>
< / div>
< / div>
SCSS / CSS
.wrap {
.main-page {
.row-2col-left {
。侧边栏{
位置：相对;
宽度：30％;
.sidebar-wrap {
position：fixed;
}
.sidebar-wrap.scroll {
position：absolute;
bottom：0;
}
}
.column {
width：70％;
}
}
}
}
我通过编辑用于计算滚动距离的代码对此进行了修改：
$（window ）.bind（'scroll'，function（）{
if（$（window）.scrollTop（）> = offsetHeight - 100）{
$（'。sidebar-wrap'）。addClass（ 'scroll'）;
} else {
$（'。sidebar-wrap'）。removeClass（'scroll'）;
}
}）;
因为我们已经知道offsetHeight与边栏高度相等，所以我会在减去值直到流利。如果您要使用此代码，我相信您必须更改 - 100 的值才能使其工作。
编辑：我把它全部变成了1个函数，并且启用了所有的窗口大小更新功能，这些功能也只会在调整大小完成后触发。
< script type =text / javascript>
$（document）.ready（function（）{
function updateScroll（）{
var offsetHeight = document.getElementById（'main- （'main'sidebar'）。style.height = offsetHeight +'px';
$（window）.bind（'scroll'，function （）{
if（$（window）.scrollTop（）> = offsetHeight - 100）{
$（'。sidebar-wrap'）。addClass（'scroll'）;
} else {
$（'。sidebar-wrap'）。removeClass（'scroll'）;
}
}）;
}
$ （window）.resize（updateScroll）.trigger（'resize'）
}）;
< / script>
I am looking to achieve a fixed sidebar that will scroll to the bottom of the div and then will change into an absolutely positioned element in order to stop it continuing down the page.
When you scroll back up the sidebar returns to position fixed. The sidebar needs to inherit the same height as the column next to it in order for the fixed sidebar to not look strange. The size of the sidebar needs to alter when the screen is resized in order to match the column.
So far I have been able to:
- Make the code that inherits the height of the column and applies it to the div.
- Make the code that recalculated the height on window resize.
- Make the code that changes the positioning from fixed -> absolute and vise versa
I have made the code the calculates how far the div should scroll however this is where I run into issues:
- I need it to update the distance it scrolls relative to the sidebar on window resize (I think it means just running the script again inside the resize im not too sure)
- The calculation of how far it should scroll is relative to the height of the users browser and therefore does not scroll to the correct point when on a 15" screen compared to a 23"
I am looking for some help on making the script that calculates the distance it should scroll fire on resize as well in order to create a seamless experience.
As well as some help on figuring out the correct equation to use so it appears correctly in all instances of the browser window.
Javascript
$(document).ready(function() {
var offsetHeight = document.getElementById('main-column').offsetHeight;
document.getElementById('main-sidebar').style.height = offsetHeight+'px';
function updateHeight() {
var offsetHeight = document.getElementById('main-column').offsetHeight;
document.getElementById('main-sidebar').style.height = offsetHeight+'px';
}
$(window).resize(updateHeight).trigger('resize')
$(window).bind('scroll', function() {
if($(window).scrollTop() >= 40 + $('#main-sidebar').offset().top + offsetHeight - window.innerHeight) {
$('.sidebar-wrap').addClass('scroll');
} else {
$('.sidebar-wrap').removeClass('scroll');
}
});
});
HTML
<div class="main-page">
<div class="row-2col-left">
<div class="column" id="main-column">
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('
<p id="breadcrumbs">','</p>
');
}
?>
<?php if (have_posts()) :
while (have_posts()) :
the_post();
the_content();
endwhile;
endif; ?>
</div>
<div class="sidebar" id="main-sidebar">
<div class="sidebar-wrap" id="sidebar-wrap">
<?php get_sidebar('sidebar-1'); ?>
<p>test</p>
</div>
</div>
</div>
</div>
SCSS/CSS
.wrap {
.main-page {
.row-2col-left {
.sidebar {
position: relative;
width: 30%;
.sidebar-wrap {
position: fixed;
}
.sidebar-wrap.scroll {
position: absolute;
bottom: 0;
}
}
.column {
width: 70%;
}
}
}
}
I amended this by editing the code used for calculating the scroll distance:
$(window).bind('scroll', function() {
if($(window).scrollTop() >= offsetHeight - 100) {
$('.sidebar-wrap').addClass('scroll');
} else {
$('.sidebar-wrap').removeClass('scroll');
}
});
Because we already know the offsetHeight is equal to that of the sidebar height, I then messed around with subtracting values until it was fluent. If you was to use this code I believe you would have to change the value of - 100 in order to make it work.
EDIT: I made it all into 1 function and enabled everything to update on window resize which also only fires once the resize is complete.
<script type="text/javascript">
$(document).ready(function() {
function updateScroll() {
var offsetHeight = document.getElementById('main-column').offsetHeight;
document.getElementById('main-sidebar').style.height = offsetHeight+'px';
$(window).bind('scroll', function() {
if($(window).scrollTop() >= offsetHeight - 100) {
$('.sidebar-wrap').addClass('scroll');
} else {
$('.sidebar-wrap').removeClass('scroll');
}
});
}
$(window).resize(updateScroll).trigger('resize')
});
</script>
这篇关于固定边栏与相对高度和流体绝对过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
