-2

http://104.193.173.104/modx/contact-information.html

I have the breadcrumb of the website I'm building affix under the top bar when scrolling down. For some reason, the rest of the website content jumps up when the switch happens. Any ideas why?

My breadcrumb CSS:

#breadcrumb {
  padding-left: 18px;
  margin-bottom: 18px;
  box-shadow: 0px -5px 10px #000;
}

#breadcrumb ul {
  margin-top: 0;
  margin-bottom: 0px;
}

#breadcrumb.affix {
  position: fixed;
  top: 52px;
  width: 100%;
  z-index: 499;
  box-shadow: 0px -8px 15px #000;
}

The "affix" script:

<script>

    // BREADCRUMB AFFIX //
    $(function() {
        $('#breadcrumb-wrapper').height($("#breadcrumb").height());

        $('#breadcrumb').affix({
            offset: { top: $('#breadcrumb').offset().top - 51 }
        });
    });

</script>

And the breadcrumb HTML (I'm using ModX so this might not be of much help):

<div id="breadcrumb">
    [[Breadcrumb? &exclude=`2,3,4,5,6,7,8,15`]]
</div>
Matthew Meredith
  • 75
  • 1
  • 2
  • 10
  • Your demo site does not do what you claim. You also have broken HTML, which might explain why I can't see your problem in my browser. See: https://validator.w3.org/nu/?doc=http%3A%2F%2F104.193.173.104%2Fmodx%2Fcontact-information.html – Sparky Feb 03 '16 at 18:52
  • Thanks @Sparky. I was tinkering with the CSS so that's why it was doing something different for a while. Thanks for the validator link, I wasn't aware of that resource. – Matthew Meredith Feb 03 '16 at 18:57

1 Answers1

2

Because your breadcrumb bar switches between position:relative (in the document flow) and position:fixed (out of document flow).

Things not in document flow do not take up space and other elements will shift to fill the gap. If you want it to be constant, then the best solution might be to make the default positioning position:absolute with an appropriate top value (and some top-margin on the following element) so that by default the element is already outside of document flow.

Draco18s no longer trusts SE
  • 15,628
  • 3
  • 36
  • 56
  • Thanks, @Draco18s. I thought it might have something to do with the position attribute, but I always have trouble figuring out which does which. So I need to make my #breadcrumb.affix absolutely positioned? I'll tinker some more. Cheers! Edit: I tried adding `position: absolute;` and `top: 52px;` to the #breadcrumb.affix div but that seemed to make it disappear completely :( – Matthew Meredith Feb 03 '16 at 18:56
  • @MatthewMeredith Glad to help, don't forget to accept an answer. :) – Draco18s no longer trusts SE Feb 03 '16 at 19:06
  • your suggestion helped, but unfortunately the problem still persists. Changing to `absolute` made things worse so I'm back to the content jumping. – Matthew Meredith Feb 03 '16 at 19:08
  • 1
    If you mean that the content shifts up and is hidden, you need to insert some margin or other in-flow object to push things back down again. – Draco18s no longer trusts SE Feb 03 '16 at 19:09
  • Okay, that makes sense... But will that not push everything down before the `.affix` is added? I already have an 18px margin at the top of my `content-wrapper` div. – Matthew Meredith Feb 03 '16 at 19:11
  • Great, I got it! Changed #breadcrumb to be absolute and left #breadcrumb.affix as fixed. Then I just added a larger margin-top to content-wrapper and voila! Thanks again for your help :) Not sure why the downvotes?? – Matthew Meredith Feb 03 '16 at 19:18