Показать div при прокрутке после 800px

Question

Показать div при прокрутке после 800px

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

EDIT:

[и когда scrollUp и высота меньше 800px, этот div должен скрыть]

HTML:

<div class="bottomMenu">
  <!-- content -->
</div>

css:

.bottomMenu {
    width: 100%;
    height: 60px;
    border-top: 1px solid #000;
    position: fixed;
    bottom: 0px;
    z-index: 100;
    opacity: 0;
}

jQuery:

$(document).ready(function() {
    $(window).scroll( function(){
        $('.bottomMenu').each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if( bottom_of_window > bottom_of_object ){
                $(this).animate({'opacity':'1'},500);
            }
        }); 
    });
});

здесь Скрипка мой текущий код.

4 62

html css jquery

4 ответа:

у вас есть несколько вещей происходит. Во-первых, почему класс? У вас есть несколько из них на странице? Ус предполагает, что ты не можешь. Если вы не должны использовать ID - это быстрее, как в CSS и jQuery:
<div id=bottomMenu>You read it all.</div>
во-вторых, у вас есть несколько сумасшедших вещей, происходящих в этом CSS - в частности, Z-индекс должен быть просто числом, а не измеряться в пикселях. Он указывает, на каком уровне находится этот тег, где каждый более высокий номер ближе к пользователю (или поставить другой путь, поверх / окклюдирующих тегов с более низкими Z-индексами).

анимация, которую вы пытаетесь сделать, в основном .fadeIn (), поэтому просто установите div для отображения: none; изначально и используйте .fadeIn (), чтобы оживить его:
$('#bottomMenu').fadeIn(2000);
.fadeIn () работает, сначала делая display: (независимо от правильного свойства отображения для тега), opacity: 0, а затем постепенно усиливая непрозрачность.

полный рабочий пример:

http://jsfiddle.net/b9chris/sMyfT/

CSS:
#bottomMenu {
    display: none;
    position: fixed;
    left: 0; bottom: 0;
    width: 100%; height: 60px;
    border-top: 1px solid #000;
    background: #fff;
    z-index: 1;
}
JS:
var $win = $(window);

function checkScroll() {
    if ($win.scrollTop() > 100) {
        $win.off('scroll', checkScroll);
        $('#bottomMenu').fadeIn(2000);
    }
}

$win.scroll(checkScroll);

8

вы также можете сделать это.

$(window).on("scroll", function () {
   if ($(this).scrollTop() > 800) {
      #code here
   } else {
      #code here
   }
});

2

полосы прокрутки & $(window).scrollTop()

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

Если (как я, возможно, глупо пытался), вы хотите реализовать такую функциональность, и вы также хотите, скажем так, реализовать минималистский "чистый экран" бесплатно полос прокрутки, например,эта дискуссия, потом $(window).scrollTop() не будет работать.

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

Если кто-нибудь может предложить несколько советов о том, как преодолеть это или немного больше понимания, не стесняйтесь отвечать, так как мне пришлось прибегнуть к show/hide onmouseover/mouseleave вместо этого здесь

Живи долго и программируй, Коллиг.

1

apaul · Accepted Answer · 2015-08-25 20:24:37

если вы хотите показать div после прокрутки нескольких пикселей:

Пример Работающего

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

body {
  height: 1600px;
}
.bottomMenu {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  background: red;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Scroll down... </p>
<div class="bottomMenu"></div>

его простой, но эффективный.

документация .scroll ()
документация .scrollTop()

если вы хотите показать div после прокрутки ряда пиксели,

без jQuery:

Пример Работающего

myID = document.getElementById("myID");

var myScrollFunc = function() {
  var y = window.scrollY;
  if (y >= 800) {
    myID.className = "bottomMenu show"
  } else {
    myID.className = "bottomMenu hide"
  }
};

window.addEventListener("scroll", myScrollFunc);

myID = document.getElementById("myID");

var myScrollFunc = function() {
  var y = window.scrollY;
  if (y >= 800) {
    myID.className = "bottomMenu show"
  } else {
    myID.className = "bottomMenu hide"
  }
};

window.addEventListener("scroll", myScrollFunc);

body {
  height: 2000px;
}
.bottomMenu {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  background: red;
  z-index: 1;
  transition: all 1s;
}
.hide {
  opacity: 0;
  left: -100%;
}
.show {
  opacity: 1;
  left: 0;
}

<div id="myID" class="bottomMenu hide"></div>

документация .scrollY
документация .имя_класса
документация .addEventListener

если вы хотите показать элемент после прокрутки это:

Пример Работающего

$('h1').each(function () {
    var y = $(document).scrollTop();
    var t = $(this).parent().offset().top;
    if (y > t) {
        $(this).fadeIn();
    } else {
        $(this).fadeOut();
    }
});

$(document).scroll(function() {
  //Show element after user scrolls 800px
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }

  // Show element after user scrolls past 
  // the top edge of its parent 
  $('h1').each(function() {
    var t = $(this).parent().offset().top;
    if (y > t) {
      $(this).fadeIn();
    } else {
      $(this).fadeOut();
    }
  });
});

body {
  height: 1600px;
}
.bottomMenu {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  background: red;
  z-index: 1;
}
.scrollPast {
  width: 100%;
  height: 150px;
  background: blue;
  position: relative;
  top: 50px;
  margin: 20px 0;
}
h1 {
  display: none;
  position: absolute;
  bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Scroll Down...</p>
<div class="scrollPast">
  <h1>I fade in when you scroll to my parent</h1>

</div>
<div class="scrollPast">
  <h1>I fade in when you scroll to my parent</h1>

</div>
<div class="scrollPast">
  <h1>I fade in when you scroll to my parent</h1>

</div>
<div class="bottomMenu">I fade in when you scroll past 800px</div>

обратите внимание, что вы не можете получить смещение элементов, установленных в display: none;, вместо этого возьмите смещение родительского элемента.

документация .каждый()
документация .родитель()
документация .offset ()

если вы хотите иметь навигационную или div-палку или док-станцию в верхней части страницы после прокрутки до нее и отклеивания / открепления при прокрутке вверх:

Пример Работающего

$(document).scroll(function () {
    //stick nav to top of page
    var y = $(this).scrollTop();
    var navWrap = $('#navWrap').offset().top;
    if (y > navWrap) {
        $('nav').addClass('sticky');
    } else {
        $('nav').removeClass('sticky');
    }
});

#navWrap {
    height:70px
}
nav {
    height: 70px;
    background:gray;
}
.sticky {
    position: fixed;
    top:0;
}

$(document).scroll(function () {
    //stick nav to top of page
    var y = $(this).scrollTop();
    var navWrap = $('#navWrap').offset().top;
    if (y > navWrap) {
        $('nav').addClass('sticky');
    } else {
        $('nav').removeClass('sticky');
    }
});

body {
    height:1600px;
    margin:0;
}
#navWrap {
    height:70px
}
nav {
    height: 70px;
    background:gray;
}
.sticky {
    position: fixed;
    top:0;
}
h1 {
    margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas,
  imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum
  oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<div id="navWrap">
  <nav>
    <h1>I stick to the top when you scroll down and unstick when you scroll up to my original position</h1>

  </nav>
</div>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas,
  imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum
  oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>