Question

我是stackoverflow的新手，似乎找不到我的问题的答案 - 如果我错过了，请把链接放到类似的问题上，但我已经给了它一个强大的雄鸡。

我正在建立一个投资组合网站，当用户点击一个项目时，点击的div滑出，底部的div显示项目案例研究。

问题：当用户向下滚动以在滑动div上投影拇指时，下部div会随之滚动 - 因此当用户单击项目时，案例研究已向下滚动。我需要通过scrolltop（0）的案例研究来揭示

这是我所拥有的简化版本，因此您可以获得一个想法：

// View Project Details (user clicks thumbnail from LP) CTA function
		$(".projThumb").click(function()
		{
			$("#nav-icon3").toggleClass('open');
			$(".projDetails").fadeIn( 500 );
			// $('.lowerContainer').css('position','absolute');
			$('.mainContentWrap').openSlide();
			
			var id = $(this).attr('id');
			
			if(id == 'Proj1')
			{
				$("#Proj1_Details").fadeIn( 500 );
				
				//get persona image height so background shape is proportional
				var personaImgHeight = parseInt($("#personaImg1").height());
				$(".containImg").css("height", personaImgHeight + "px");
				$(".personaImgWrap").css("height", personaImgHeight + "px"); 

			} else if (id == 'Proj2') {
				$("#Proj2_Details").fadeIn( 500 );
				
				//get persona image height so background shape is proportional
				var personaImgHeight = parseInt($("#personaImg2").height());
				$(".containImg").css("height", personaImgHeight + "px");
				$(".personaImgWrap").css("height", personaImgHeight + "px"); 

			} else if (id == 'Proj3') {
				$("#Proj3_Details").fadeIn( 500 );
				
				//get persona image height so background shape is proportional
				var personaImgHeight = parseInt($("#personaImg3").height());
				$(".containImg").css("height", personaImgHeight + "px");
				$(".personaImgWrap").css("height", personaImgHeight + "px"); 

			} else if (id == 'Proj4') {
				$("#Proj4_Details").fadeIn( 500 );
			};

		});

.lowerContainer
{
	width:80%;
	max-width: 2050px;
	height: auto;
	min-height:100vh;
	margin:0 auto;
	background:#f9f9f9;
	position: relative;
	/*left:10%;*/
}
.revealPanel 
{
	width: 100%;
	min-height:100vh;
	float: left;
	margin-top:0;
	overflow-y:scroll;
	padding:0;
	/*position: fixed;*/

}

.mainContent
{
	width:80%;
	max-width: 2050px;
	height:auto;
	top:0px;
	left: 0px;
	right: 0;
	margin-top: 0;
	margin-right:auto;
	margin-bottom:0;
	margin-left:auto;
	position: absolute;
	z-index: 1000;
	overflow-x: hidden;
	overflow-y: scroll; 
	opacity: 1;
}
.mainContentWrap
{
	width:100%;
	overflow:auto;
}

<div class="lowerContainer group">
	<section class="revealPanel group">

		<!--  ****************************** 
		PROJECT CASE STUDY GOES HERE  
		******************************** -->

	</section>  <!-- /revealPanel -->
</div>  <!-- /lowerContainer -->

<div class="mainContent">
	<div class="mainContentWrap">
		<!--  ****************************** 
			MY WORK SECTION  
			******************************** -->
			<div class="myWork group">
				<!-- Project container (Contains project thumbnails )  -->
				<div class="projContainer">

					<h3 class="secTitle">Recent Work</h3>
					<div class="projectsWrap">
						<div class="row">
							
							<!-- Project 1 -->
							<div class="projects col-lg-6 col-md-12">
								<div class="projThumb" id="Proj1">
									<img src="assets/proj1.png" width="100%" alt="">
								</div>
							</div>
							
							<!-- Project 2 -->
							<div class="projects col-lg-6 col-md-12">
								<div class="projThumb" id="Proj2">
									<img src="assets/proj2.png" width="100%" alt="">
								</div>
							</div>
							
							<!-- Project 3 -->
							<div class="projects col-lg-6 col-md-12">
								<div class="projThumb" id="Proj3">
									<img src="assets/proj3.png" width="100%" alt="">
								</div>
							</div>

							<!-- Project 4 -->
							<div class="projects col-lg-6 col-md-12">
								<div class="projThumb" id="Proj4">
									<img src="assets/proj4.png" width="100%" alt="">
								</div>
							</div>

						</div>  <!-- /row -->
					</div>  <!-- /projectWrap -->

				</div>  <!-- projectsWrap -->
				<!-- <div class="triBg" id="triBg-myWork"></div> -->
			
 			</div>  <!-- /myWork -->
	</div>
</div>  <!-- /mainContent -->

Answer 1

根据你所说的你想要发生的事情，如果没有真正关注你的大量代码，我认为你已经过度复杂了。

您可以使用jQuery＆＃39; .slideToggle() http://api.jquery.com/slidetoggle/

您还可以利用这样一个事实：您可以将多个元素放在同一个类中，以帮助最大限度地减少重复代码的数量。

＆＃13;

$(document).on('click', '.projectButton', function(){
  $(this).siblings('.projectInfo').slideToggle();
});

＆＃13;

.projectInfo {
  display: none;
}

.projectButton {
  height: 25px;
  background: gray;
  cursor: pointer;
  border: 1px solid white;
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="projectsContainer">
  
  <div class="project" id="project1">
    <div class="projectButton">Project 1</div>
    <div class="projectInfo">Project 1 information goes here</div>
  </div>
  
  <div class="project" id="project2">
    <div class="projectButton">Project 2</div>
    <div class="projectInfo">Project 2 information goes here</div>    
  </div>
  
  <div class="project" id="project3">
    <div class="projectButton">Project 3</div>
    <div class="projectInfo">Project 3 information goes here</div>    
  </div>
  
  <div class="project" id="project4">
    <div class="projectButton">Project 4</div>
    <div class="projectInfo">Project 4 information goes here</div>    
  </div>
  
</div>

＆＃13;

当绝对div在顶部时，如何禁用底部div？

1 个答案: