jQuery 在 800px 后在 scrollDown 上显示 div

Question

提问by AndrewS

I want to show a hidden div when scrolling down after 800px from the top of the page. By now I have this example, but I guess it needs modification in order to achive what I am looking for.

我想在从页面顶部向下滚动 800 像素后显示隐藏的 div。现在我有了这个例子，但我想它需要修改才能实现我正在寻找的东西。

EDIT:

编辑：

[And when scrollUp and the height is less the 800px, this div should hide]

[当 scrollUp 和高度小于 800px 时，这个 div 应该隐藏]

HTML:

HTML：

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

css:

css：

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

jQuery:

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);
            }
        }); 
    });
});

Here is a Fiddleof my current code.

这是我当前代码的小提琴。

Answer 1

回答by apaul

If you want to show a div after scrolling a number of pixels:

如果要在滚动多个像素后显示 div：

Working Example

工作示例

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

Its simple, but effective.

它简单，但有效。

Documentation for .scroll()
Documentation for .scrollTop()

.scroll()文档 .scrollTop()
文档

If you want to show a div after scrolling a number of pixels,

如果要在滚动多个像素后显示 div，

without jQuery:

没有 jQuery：

Working Example

工作示例

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>

Documentation for .scrollY
Documentation for .className
Documentation for .addEventListener

.scrollY 的
 文档 .className 的文档 .addEventListener 的
 文档

If you want to show an element after scrolling to it:

如果要在滚动到某个元素后显示它：

Working Example

工作示例

$('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>

Note that you can't get the offset of elements set to display: none;, grab the offset of the element's parent instead.

请注意，您无法将元素的偏移量设置为display: none;，而是获取元素的父元素的偏移量。

Documentation for .each()
Documentation for .parent()
Documentation for .offset()

.each()
文档 .parent()文档 .offset()
文档

If you want to have a nav or div stick or dock to the top of the page once you scroll to it and unstick/undock when you scroll back up:

如果您希望在滚动到页面后将导航或 div 棒或停靠到页面顶部，并在向上滚动时取消固定/取消停靠：

Working Example

工作示例

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

Answer 2

回答by Chris Moschini

You've got a few things going on there. One, why a class? Do you actually have multiple of these on the page? The CSS suggests you can't. If not you should use an ID - it's faster to select both in CSS and jQuery:

你有一些事情要做。一，为什么要上课？您实际上在页面上有多个这些吗？CSS 建议你不能。如果不是，您应该使用 ID - 在 CSS 和 jQuery 中同时选择会更快：

<div id=bottomMenu>You read it all.</div>

Second you've got a few crazy things going on in that CSS - in particular the z-index is supposed to just be a number, not measured in pixels. It specifies what layer this tag is on, where each higher number is closer to the user (or put another way, on top of/occluding tags with lower z-indexes).

其次，该 CSS 中发生了一些疯狂的事情 - 特别是 z-index 应该只是一个数字，而不是以像素为单位。它指定此标签位于哪个层，其中每个较高的数字更接近用户（或者换一种方式，在/遮挡具有较低 z-index 的标签之上）。

The animation you're trying to do is basically .fadeIn(), so just set the div to display: none; initially and use .fadeIn() to animate it:

您尝试执行的动画基本上是 .fadeIn()，因此只需将 div 设置为 display: none; 最初并使用 .fadeIn() 对其进行动画处理：

$('#bottomMenu').fadeIn(2000);

.fadeIn() works by first doing display: (whatever the proper display property is for the tag), opacity: 0, then gradually ratcheting up the opacity.

.fadeIn() 的工作方式是首先执行 display:（无论标签的正确显示属性是什么），opacity: 0，然后逐渐提高不透明度。

Full working example:

完整的工作示例：

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

CSS:

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:

JS：

var $win = $(window);

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

$win.scroll(checkScroll);

Answer 3

回答by Precious Tom

You can also, do this.

你也可以这样做。

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

Answer 4

回答by collyg

SCROLLBARS & $(window).scrollTop()

滚动条 & $(window).scrollTop()

What I have discovered is that calling such functionality as in the solution thankfully provided above, (there are many more examples of this throughout this forum - which all work well) is only successful when scrollbars are actually visible and operating.

我发现，调用上述解决方案中的此类功能（本论坛中有更多此类示例 - 一切运行良好）只有在滚动条实际可见并运行时才能成功。

If (as I have maybe foolishly tried), you wish to implement such functionality, and you also wish to, shall we say, implement a minimalist "clean screen" free of scrollbars, such as at this discussion, then $(window).scrollTop()will not work.

如果（正如我可能愚蠢地尝试过的那样），您希望实现这样的功能，并且您也希望，容我们说，实现一个没有滚动条的极简“干净的屏幕”，例如在本次讨论中，那么$(window).scrollTop()将无法工作。

It may be a programming fundamental, but thought I'd offer the heads up to any fellow newbies, as I spent a long time figuring this out.

这可能是编程基础，但我想我会向所有新手提供建议，因为我花了很长时间来弄清楚这一点。

If anyone could offer some advice as to how to overcome this or a little more insight, feel free to reply, as I had to resort to show/hide onmouseover/mouseleave instead here

如果有人可以就如何克服这个问题或更多见解提供一些建议，请随时回复，因为我不得不在此处显示/隐藏 onmouseover/mouseleave

Live long and program, CollyG.

长寿和计划，CollyG。

jQuery 在 800px 后在 scrollDown 上显示 div

提问by AndrewS

回答by apaul

without jQuery:

没有 jQuery：

回答by Chris Moschini

回答by Precious Tom

回答by collyg

相关推荐

最近更新

标签

jQuery 在 800px 后在 scrollDown 上显示 div

提问by AndrewS

回答by apaul

without jQuery:

没有 jQuery：

回答by Chris Moschini

回答by Precious Tom

回答by collyg

相关推荐

jQTouch 和 jQuery mobile 的区别

jQuery window.onclose 函数

从 Jquery var 的末尾修剪“px”

jQuery 手风琴（）不起作用

相关推荐

最近更新

标签