CODEWITHSUNDEEP
htmlcsscss-position
user6086034
user6086034

Reputation:

Why is position:fixed making div go outside parent

I have made this: https://jsfiddle.net/f69gu8ss/2/

When I do position:fixed the header goes outside the parent. And also when I scroll it goes to the top of the page. I want it to stick below the image. What do I give to top to make it stick below the image.. relative to its sibling?

Upvotes: 4

Views: 2227

Answers (1)

UkFLSUI
UkFLSUI

Reputation: 5672

In your css, add this:

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

Also, jQuery is used here:

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

See this: https://jsfiddle.net/f69gu8ss/5/

Upvotes: 3

Related Questions