为什么位置：固定制作div在父母之外

Question

我做了这个：https://jsfiddle.net/f69gu8ss/2/

当我做position:fixed时，标题超出了父母。而且当我滚动它时会转到页面顶部。我希望它坚持在图像下方。我怎么给top让它坚持在图像下面...相对于它的兄弟姐妹？

Answer 1

在你的CSS中，添加：

.sticky {
  position: fixed;
  width: inherit;
}

此外，jQuery在这里使用：

$(document).ready(function() {
  var stickyNavTop = $('.header').offset().top;

  var stickyTopNav = function() {
    var scrollTop = $(window).scrollTop();

    if (scrollTop > stickyNavTop) {
      $('.header').addClass('sticky');
    } else {
      $('.header').removeClass('sticky');
    }
  };

  stickyTopNav();

  $(window).scroll(function() {
    stickyTopNav();
  });
});

见：https://jsfiddle.net/f69gu8ss/5/