Question

＆＃13;

<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 -->

＆＃13;

我的页面被分成两半。包含左侧的div是静态位置。包含右侧内容的div是位置固定的。我遇到的问题是，当我减小屏幕宽度时，固定位置右侧重叠到页脚。左侧和右侧都有一个div环绕。我感谢任何答案/建议！如果需要更多背景，请告诉我。

＆＃13;

.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;
}

＆＃13;

Answer 1

＆＃13;

_handleListItemClick

＆＃13;

 .entry-header {
    	position: reletive;
    }
    .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;
    }

＆＃13;

只需使用<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> </div>  <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>  </header>作为标题。

Answer 2

我添加了一些JavaScript来解决我的问题。我还必须使用jQuery Waypoint。 JavaScript代码的作用是触发一个新的类，使得右侧的div＆＃34; position：static＆＃34;一旦左侧div的底部进入窗口视图。这可以防止右侧比左侧低，从而防止重叠进入页脚。我已经附加了JS代码和一些新的CSS。

＆＃13;

.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;
	}
}

＆＃13;

<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'
});

＆＃13;

位置固定元素重叠成页脚

2 个答案: