Использовать такое появление как ссылка Javascript

Я нуждаюсь в том, чтобы смочь использовать появление как ссылка для следующего кода таким образом что, если div появляется в них 1000px scroll, он исчезает 500px после, они должны быть независимыми действие другой, чтобы мочь делать различные комбинации. Спасибо.

$(window).scroll(function()  {
    if ($(window).scrollTop() > 1000 )  {
      $(".topmenu").fadeIn();   // > 100px from top - show div
    }
    else {
     $(".topmenu").fadeOut();    // <= 100px from top - hide div
    }
});
$(window).scroll(function() {
    if ($(this).scrollTop() > 2000) { //use `this`, not `document`
        $('.height600').css({
            'display': 'none'
        });
    }
});
.youdiclass{position:fixed; display:none;width:100px; height:100px; background:red;}
#back{width:300px; height:500px;background:blue; margin:auto;}
.height600{}
.topmenu{
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 30px;
  background: rgba(255,246,0,1.00);
  z-index: 1;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>


<div class=" topmenu height600">
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
3
задан 15.03.2016, 22:44
1 ответ

Если то, что ты хочешь, состоит в том, чтобы меню (или любой другой элемент) оказалось у прибывшего scroll, и в том, чтобы он исчез после X pixels, основываясь на классе, который у него есть, он рекомендовал бы тебе делать какие-то изменения:

  • Не используй классы, используй признаки data-*.
  • Ты мог бы использовать два признака data-*:
    • data-in: число pixels, когда он явится элементом
    • data-out: число pixels, когда спрячут элемент
  • Когда он будет сделан scroll, подтверди элементы, которые содержат эти признаки и muéstralos/escóndelos, как он соответствовал (элемент должен бы быть видимым, если он выполняет следующее требование: восходи - in <scroll <он восходит - out).

Таким остался бы код с этими изменениями. Я добавил два меню с различным контентом и различные data-in и data-out для того, чтобы ты смог видеть, как они показывают / спрячутся, когда они прибывают к указанным pixels:

$(window).scroll(function()  {

  // comprobar todos los elementos que tengan el atributo data-in
  $("[data-in]").each(function() {
    
    // si cumplen con data-in < scroll < data-out, los mostramos
    if ($(window).scrollTop() > parseInt($(this).data("in")) && $(window).scrollTop() < parseInt($(this).data("out")) )  {
      $(this).fadeIn();
    }
    // si no, los escondemos
    else {
      $(this).fadeOut();
    }

  });

});
.youdiclass{position:fixed; display:none;width:100px; height:100px; background:red;}
.back{width:300px; height:500px;background:blue; margin:auto;}
.height600{}
.topmenu{
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 30px;
  background: rgba(255,246,0,1.00);
  z-index: 1;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>


<div class="topmenu" data-in="1000" data-out="1500">A</div>
<div class="topmenu" data-in="2000" data-out="2500">B</div>
<div class="back">
</div>
<div class="back" style="background:green";>
</div>
<div class="back">
</div>
<div class="back" style="background:green";>
</div>
<div class="back">
</div>
<div class="back" style="background:green";>
</div>
<div class="back">
</div>
<div class="back" style="background:green";>
</div>
<div class="back">
</div>
<div class="back" style="background:green";>
</div>
<div class="back">
</div>
<div class="back" style="background:green";>
</div>
3
ответ дан 24.11.2019, 14:43
  • 1
    Это не решает мою проблему, я хотел бы следующее, давайте представлять два класса: In100 (который показывает div вслед за 100px) и Out500 (который прячет div, продвинувшись 500px), если был третий класс In1000 podr и # 237; чтобы сочетать ее с Out500 и схвати и # 237; последовательно. – Ivan Soler 15.03.2016, 23:33
  • 2
    У тебя есть, что в и # 241; adir м и # 225; s и лучшие детали в твои вопросы, потому что мы не можем угадывать такие вещи как эта (это первый раз, что ты ссылаешься на что-то как in100 или out500). По крайней мере сейчас я верю в то, что s и # 233; из-за d и # 243; nde ты хочешь, чтобы пошла тема. Ты хочешь в и # 241; adir что-то, что он показывал бы cu и # 225; ndo нужно показывать div и из-за cu и # 225; nto, и #191; верно? – Alvaro Montoro♦ 15.03.2016, 23:36
  • 3
    S и # 237; Альваро, прощает из-за confusi и # 243; n. Иногда отсутствие знания это вызывает, вероятно я не вижу столько возможных оттенков или выборов в resoluci и # 243; n моих проблем. Я хочу, чтобы он сказал cu и # 225; ndo и из-за cu и # 225; nto в ссылке на этот, когда и не в общее количество ее p и # 225; gina (если это было время, которое появлялось бы в 10 секунд и скрывало 2 секунды despu и # 233; s). – Ivan Soler 15.03.2016, 23:41
  • 4
    @IvanSoler я изменил ответ, прицел посмотрим эта приспосабливается лучше – Alvaro Montoro♦ 15.03.2016, 23:52
  • 5
    Incre и # 237; ble @AlvaroMontoro он лучше, которого он ждал. Much и # 237; пропасти спасибо! Хотя предпочитать и # 237; чтобы это делать с классами, чтобы мочь изменять все с листа java каждый раз, когда я был похож. – Ivan Soler 15.03.2016, 23:58