为什么位置：固定制作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/