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

Question

I am new to stackoverflow and can't seem to find an answer to my issue - please put link to similar question if I missed it, but I have gave it a strong gander already.

I am making a portfolio site and when a user clicks a project, the clicked div slides out and the bottom div is revealed with the project case study.

The problem: When user scrolls down to project thumbs on sliding div, the lower div scrolls with it - therefore when the user clicks the project, the case study is already scrolled down. I need it to reveal with the case study at scrolltop(0)

Here is a simplified version of what I have so you can get an idea:

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

Based on what you said you want to happen, without really looking at your massive amount of code, I think you are over complicating this.

You can make use of jQuery's .slideToggle() http://api.jquery.com/slidetoggle/

You can also utilize the fact that you can have multiple elements with the same class to help minimize the amount of repeated code.

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

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

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