向下滚动后修复div?

时间:2017-09-21 11:38:09

标签: javascript html css scroll

我尝试修复顶部:滚动后id为“sticky”的div,但不起作用,愚见java脚本代码是问题。 有人可以帮我做。

function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top) {
    $('#sticky').addClass('stick');
    $('#sticky-anchor').height($('#sticky').outerHeight());
  } else {
    $('#sticky').removeClass('stick');
    $('#sticky-anchor').height(0);
  }
}
    
$(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});
#sticky {
  background-color: red;
  height:140px;
  z-index: 1;
}
    
#sticky.stick {
  position: fixed;
  top: 0;
  z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sticky-anchor"></div>
<div id="sticky">
  <ul class="menu">
    <li><a href="#">Nos Produits</a></li>
  </ul> <!--  ul end .menu -->
</div>

2 个答案:

答案 0 :(得分:1)

您需要加入jQuery

Element.prototype.classList
URL
var fileBox = new Microsoft.Win32.OpenFileDialog
{
    InitialDirectory = Environment.GetFolderPath(Environment.SpecialFolder.Desktop),
    Filter = "All files (*.*)|*.*",
    FilterIndex = 1,
    Multiselect = true,
    CheckPathExists = true,
    CheckFileExists = true
};
var fileSelected = fileBox.ShowDialog(owner);

答案 1 :(得分:0)

您可以使用JQuery和 JQuery Magnet 插件实现此目的。 https://github.com/jtannous/JQuery-Magnet

$(".fix-me-to-top-after-scroll").magnet();
<div class="fix-me-to-top-after-scroll">CONTENT HERE</div>