Появление и исчезновение определенных DIV в зависимости от положения прокрутки - PullRequest
Новая
       24

Появление и исчезновение определенных DIV в зависимости от положения прокрутки

1 голос
/ 29 августа 2011

Основная проблема, с которой я столкнулся, заключается в том, что я хотел бы постепенно увеличивать и уменьшать частоту в зависимости от текущего вертикального положения пользователя на странице. Получить 1-й деление, когда оно прокручивается вниз, легко, равно как заставить его исчезать, когда я возвращаюсь к началу страницы. Я предполагаю, что мне нужно использовать JavaScript типа «больше чем», «меньше», чем scrollTop, чтобы установить пределы каждого из них.

Вот javascript, который я использовал до сих пор: 

if(scrollTop > 500) {
$("#Project-Desc, #Aqueous-Desc").fadeIn('slow');}
if(scrollTop < 500) {
$("#Project-Desc").fadeOut('slow');}

Вот мой сайт, чтобы установить, что именно я пытаюсь сделать:

http://luke -keller.com / test2 /

Вы увидите, что в маленьком сером квадрате, который исчезает, будут содержаться описания проектов, и именно здесь мне нужно постепенно затенять старый контент и добавить новый контент на основе позиции прокрутки или тому подобного.

Спасибо!

PS - Дополнительный HTML 

<div id="Portfolio">

    <div id="Port-Position">

        <div id="Aqueous" class="Projects">
            <div class="Project-Spacer">
            </div>
            <img src="Images/Projects/AqueousModel.jpg" width="600" height="400" border="0" alt=""/>
            <img src="Images/Projects/AqueousPlan.jpg" width="600" height="400" border="0" alt=""/>
            <img src="Images/Projects/AqueousModel.jpg" width="600" height="400" border="0" alt=""/>
            </div>

            <div class="Project-Divider">
            </div>

            <div id="Townhouse" class="Projects">
            <div class="Project-Spacer">
            </div>
            <img src="Images/Projects/townhousePlan.jpg" width="600" height="400" border="0" alt=""/>
            <img src="Images/Projects/townhouseModel.jpg" width="600" height="400" border="0" alt=""/>
            <img src="Images/Projects/townhousePath.jpg" width="600" height="400" border="0" alt=""/>
            </div>

      </div>
   </div>

        <div id="Project-Desc">

            <div id="Aqueous-Desc" class="Desc">
                <h2>AQUEOUS</h2>
                <p><h4>2006 - Temple University</h4></p>

                <div class="Desc-Body">
                Aqueous, meaning of water, is a blah blah blah more text here blah blah blah sweet awesome. Minecraft. Love that stuff.
                </div>

                <div class="Desc-Footer">
                Clay Prototype, Handrawn Plan on Vellum, Foamcore Model.
                </div>

             </div>

             <div id="Townhouse-Desc" class="Desc">
                <h2>TOWNHOUSE</h2>
                <p><h4>2006 - Temple University</h4></p>

                <div class="Desc-Body">
                Aqueous, meaning of water, is a blah blah blah more text here blah blah blah sweet awesome. Minecraft. Love that stuff.
                </div>

                <div class="Desc-Footer">
                Clay Prototype, Handrawn Plan on Vellum, Foamcore Model.
                </div>

             </div>

</div>

ПРИМЕЧАНИЕ. Описание проекта, поле, которое я получаю постепенно увеличивать и уменьшать, является элементом фиксированной позиции, если это имеет какое-либо значение.

Ответы [ 2 ]

1 голос
/ 06 мая 2013

Это было очень полезно.Я сделал несколько модификаций, которые, как мне кажется, помогают облегчить переходы между элементами, когда пользователь быстро прокручивает.

Что-то вроде 

     if( y > (600) && y < (1900) ){
        $("#Aqueous-Desc").fadeIn('slow');
     }else{
        $("Aqueous-Desc").fadeOut("slow");
     }

Это связывает содержание непрозрачности с диапазоном, установленным в ifзаявление, так что если вы когда-либо выйдете за пределы, оно исчезнет.

0 голосов
/ 29 августа 2011

Я думаю, что у меня есть ответ.Я приветствую всех, у кого есть какие-либо предложения относительно этого кода, но, по сути, вам нужно найти положение прокрутки окна и вставить постепенное увеличение и уменьшение на основе определенных параметров (где положение больше, чем x, но меньше, чем y,исчезают в #mydiv).Я кодировал несколько ниже, и у меня еще много работы. 

$(window).scroll(function(){
  // gets the position of the window
          var y = $(window).scrollTop();

            if( y < (600) ){
            $(".Desc").fadeOut('slow');}

          if( y > (600) && y < (1900) ){
            $("#Aqueous-Desc").fadeIn('slow');}
          if( y > (1900) ){
            $("#Aqueous-Desc").fadeOut('slow');}
          if( y < (600) ){
            $("#Aqueous-Desc").fadeOut('slow');}


            if( y > (2100) && y < (3300) ){
                $("#Townhouse-Desc").fadeIn('slow');}
            if( y > (3300) ){
                $("#Townhouse-Desc").fadeOut('slow');}
            if( y < (2100) ){
                $("#Townhouse-Desc").fadeOut('slow');}


            if( y > (3500) && y < (4700) ){
                $("#Poley-Desc").fadeIn('slow');}
            if( y > (4700) ){
                $("#Poley-Desc").fadeOut('slow');}
            if( y < (3500) ){
                $("#Poley-Desc").fadeOut('slow');}
...