CSS masters please...

Out of context: Reply #10

  • Started
  • Last post
  • 27 Responses
  • mg330

    Trying to figure something out and unfortunately stumped.

    I want to have the header shown below fixed on the page so it doesn't scroll. I then want the text below it to scroll on page scroll, but disappear once it hits that div containing the header. I've been messing with overflow, setting a fixed height, etc.

    I've been messing around with this here: https://codepen.io/mgee/pen/xmxy…

    - header should remain fixed
    - text should scroll and disappear behind header as it scrolls upwards
    - scrolling anywhere on the page should scroll that content - no scroll bar for that text section as used in overflow:scroll.

    Can anyone offer a hand with this?

    mg33 0Permalink
    UpvoteDownvote
    Flag
    • you can't have events with css. To achieve that you would need js. Bootstrap has something called "affix", which is the easiest way to get that up and running.mekk
    • another solution would be to have the title fixed and the text overlapping it (same as you have it right now, just with background for text)mekk
    • https://codepen.io/a…sted
    • Not sure quite what you mean... not this?

      https://codepen.io/a…      kingsteven
    • https://codepen.io/p…mekk
    • ah thats nice one mekk :)sted
    • oh, i think i see what you're doing with the background image... you can maybe try background-attachmen... ??

      https://codepen.io/a…      kingsteven
    • * background - attachment : fixed;

      tidier version:
      https://codepen.io/a…      kingsteven
    • keep in mind it will only work with one heading/text. all fixed elements with top: 0; are on top of each other.mekk
    • Whoa! Damn, thanks for all the quick responses.mg33
    • kingsteven - that's exactly what I needed. Thank you!mg33
    • Actually... now that I look more, that white background on the fixed header is how it's doing it. I need it to be transparent and the scroll disappear behind itmg33
    • background-color: rgba(255,255,255,.5...mekk
    Show [[ numHiddenNotes ]] more notesAdd Note
    SaveCancel

View thread