位置固定元素与页脚重叠

网页开发

在此处输入图片说明

<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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

位置相对重叠位置固定

来自分类Dev

位置:固定重叠页面

来自分类Dev

页脚位置无法固定

来自分类Dev

停止页眉页脚从松动的位置:单击固定-Jquery Mobile

来自分类Dev

元素的固定位置?

来自分类Dev

剖面位置:固定重叠页脚

来自分类Dev

展开时固定元素的位置

来自分类Dev

如何创建固定位置的表格页脚?

来自分类Dev

Tailwind CSS-固定位置的页脚溢出

来自分类Dev

CSS“位置:固定”滚动文本重叠问题

来自分类Dev

固定偏斜元素的位置

来自分类Dev

元素与固定导航栏重叠

来自分类Dev

如何防止固定按钮重叠页脚区域并将按钮停在页脚所在的顶部

来自分类Dev

保持固定的页脚和页眉不重叠

来自分类Dev

位置固定重叠的问题?

来自分类Dev

固定位置,直到页脚之前

来自分类Dev

页脚位置无法固定

来自分类Dev

位置:iPhone iOS中的固定页脚

来自分类Dev

元素重叠位置后div中的空白

来自分类Dev

固定位置的页脚,但Flexbox也是元素流的一部分

来自分类Dev

如何使用绝对位置将页脚固定在底部?

来自分类Dev

将导航高度放在页脚之外,而不是固定位置

来自分类Dev

检测静态元素何时与滚动上的固定元素位置重叠

来自分类Dev

位置:固定-将页脚移到页眉上方

来自分类Dev

避免与固定元素重叠

来自分类Dev

具有重叠元素的固定大小的行

来自分类Dev

DIV位置固定,内部内容重叠

来自分类Dev

(CSS) 我的固定页脚与我的内容重叠

来自分类Dev

Firefox 位置固定元素 flash