<header class="entry-header">
<div class="right-side">
<h1 class="entry-title">Desk</h1><p>$99</p><p>500x200x600</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent molestie velit erat, nec porta diam fringilla vel. Nunc id euismod purus. Sed enim tellus, auctor a tempor eget, mattis sit amet massa. Etiam imperdiet elit eu faucibus vestibulum. Fusce ultrices ex quis turpis vulputate vehicula. Nulla laoreet vulputate nunc ac pretium. Pellentesque ac velit nec quam rhoncus sagittis eget porttitor lectus. Curabitur egestas vehicula lacinia. Proin ullamcorper, orci id dapibus viverra, libero ex imperdiet ex, quis lacinia dui dui vel est. Quisque condimentum nulla non elit rutrum, non mollis enim volutpat. Vestibulum mattis at magna sed porta. Cras venenatis ex dignissim nisl facilisis maximus. Integer efficitur vel augue vitae consequat. Sed ac fermentum lacus. Nulla facilisi.</p>
<div class="before">
<p>Before:</p>
<img class="beforeimage" src="img.jpg" alt="" />
</div><!-- end before -->
</div><!--end right-side-->
<!--repeater field-->
<div class="left-side">
<ul class="slides">
<li class="slide">
<img src="img1.jpg" alt="Featured Desk">
</li>
<li class="slide">
<img src="img2.jpg" alt="Featured Desk">
</li>
<li class="slide">
<img src="img3.jpg" alt="">
</li>
<li class="slide">
<img src="img4.jpg" alt="">
</li>
<li class="slide">
<img src="img5" alt="">
</li>
</ul>
</div><!-- end left-side -->
<!--end single furniture repeater-->
</header><!-- .entry-header -->
我的页面被分成两半。包含左侧的 div 是位置静态的。包含右侧内容的 div 是位置固定的。我遇到的问题是,当我减小屏幕宽度时,固定位置右侧会重叠到页脚中。还有一个 div 环绕左右两侧。我感谢任何答案/建议!如果需要更多上下文,请告诉我。
.left-side {
display: flex;
flex-direction: column;
width: 50%;
}
.right-side {
display: flex;
flex-direction: column;
margin-left: 50%;
position: fixed;
margin-right: $main-side-margins;
}
我添加了一些 JavaScript 来解决我的问题。我还必须使用 jQuery Waypoint。JavaScript 代码所做的是触发一个新类,一旦左侧 div 的底部进入窗口视图,该类就会使右侧 div “位置:静态”。这可以防止右侧低于左侧,从而防止与页脚重叠。我附上了 JS 代码和一些新的 CSS。
.right-side-to-static {
position: static !important;
margin-top: 115%;
@media only screen and (max-width: 1370px) {
margin-top: 100%;
}
@media only screen and (max-width: 1140px) {
margin-top: 75%;
}
@media only screen and (max-width: 890px) {
margin-top: 50%;
}
@media only screen and (max-width: 820px) {
margin-top: 40%;
}
@media only screen and (max-width: 730px) {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
const $rs = $('.right-side');
const $ls = $('.left-side');
let rsHeight = $('.right-side').height();
let lsHeight = $('.left-side').height();
let counter = 0;
console.log(rsHeight);
$ls.waypoint(function(direction){
counter++
if(counter > 2){
console.log('bottom in view...');
$rs.toggleClass('right-side-to-static');
}
},{
//bottom-in-view will ensure event is thrown when the element's bottom crosses
//bottom of viewport.
offset: 'bottom-in-view'
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句