5

I have been searching for a while and tried a few things but can't get the #topDiv of my code to scroll with the page. I have tried setting the position to position: sticky but this hasn't done the trick.

Here is my code:

body {
  background-size: cover;
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
}

#topDiv {
  height: 50%;
  width: 100%;
  background: url(https://placehold.it/1000x200);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: sticky;
}

#bottomDiv {
  min-height: 50%;
}
<body id="background" onresize="VerticalAlign();">
  <div id="topDiv">
    <img id="icon">
  </div>
  <div id="bottomDiv">
    <div id="textBox">
      <h1 id="header" class="check-element">Header</h1>
      <h2 id="subheader1" class="moveSub1 check-element">Subheader</h2>
      <p id="text1" class="movePara1 check-element">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec leo quam. Proin vulputate convallis augue ornare faucibus. Etiam odio purus, efficitur at aliquam sed, congue pellentesque nisl. Donec ac ultrices neque, non accumsan ex. Suspendisse varius pharetra quam, vitae dapibus risus. Mauris vel orci mi. Vivamus a purus tempor, consectetur nulla sit amet, fermentum augue.
        <br /><br />
        Morbi aliquam leo mi, ac viverra neque maximus vel. Fusce non erat feugiat, viverra justo nec, euismod enim. Fusce ut nisi tellus. Vivamus efficitur at eros sed ultrices. Donec eget metus consequat, viverra nibh commodo, imperdiet mauris. Vivamus iaculis mi a nisi imperdiet gravida. Proin semper elementum dignissim. Fusce consectetur eget leo ac fringilla. Morbi mi nisi, feugiat eget pellentesque at, cursus eget ligula. Sed iaculis nunc nisl, eget vestibulum dui tincidunt vitae. Quisque elementum magna sit amet nulla facilisis, in malesuada nibh aliquet. Quisque urna ligula, faucibus eu urna pulvinar, viverra vestibulum dui. Fusce aliquam diam posuere odio tincidunt, quis posuere felis condimentum. Donec sollicitudin rhoncus leo ac ultricies. Sed commodo tempus arcu a dapibus.
        <br /><br />
        Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.</p>
                <br /><br />
        Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.
                <br /><br />
        Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.
                <br /><br />
        Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.
    </div>
  </div>
</body>

Here it is in a Fiddle. Thank you in advance and apologies if it is obvious.

Eddie
  • 390
  • 3
  • 13

2 Answers2

3

The #topDiv: position: fixed; top: 0; height: 100px; This will keep the div on top. Wrap your #topDiv with a div: position: relative; height: 100px; This will reserve the space for the topDiv so content starts underneath this wrapper.

body {
  background-size: cover;
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
}
.top-container {
  position: relative;
  height: 100px;
}

#topDiv {
  height: 100px;
  width: 100%;
  background: url(https://placehold.it/1000x200);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: fixed;
  top: 0
}

#bottomDiv {
  min-height: 50%;
}
<body id="background" onresize="VerticalAlign();">
  <div class="top-container">
    <div id="topDiv">
      <img id="icon">
    </div>
  </div>
  <div id="bottomDiv">
    <div id="textBox">
      <h1 id="header" class="check-element">Header</h1>
      <h2 id="subheader1" class="moveSub1 check-element">Subheader</h2>
      <p id="text1" class="movePara1 check-element">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec leo quam. Proin vulputate convallis augue ornare faucibus. Etiam odio purus, efficitur at aliquam sed, congue pellentesque nisl. Donec ac ultrices neque, non accumsan ex. Suspendisse varius pharetra quam, vitae dapibus risus. Mauris vel orci mi. Vivamus a purus tempor, consectetur nulla sit amet, fermentum augue.
        <br /><br />
        Morbi aliquam leo mi, ac viverra neque maximus vel. Fusce non erat feugiat, viverra justo nec, euismod enim. Fusce ut nisi tellus. Vivamus efficitur at eros sed ultrices. Donec eget metus consequat, viverra nibh commodo, imperdiet mauris. Vivamus iaculis mi a nisi imperdiet gravida. Proin semper elementum dignissim. Fusce consectetur eget leo ac fringilla. Morbi mi nisi, feugiat eget pellentesque at, cursus eget ligula. Sed iaculis nunc nisl, eget vestibulum dui tincidunt vitae. Quisque elementum magna sit amet nulla facilisis, in malesuada nibh aliquet. Quisque urna ligula, faucibus eu urna pulvinar, viverra vestibulum dui. Fusce aliquam diam posuere odio tincidunt, quis posuere felis condimentum. Donec sollicitudin rhoncus leo ac ultricies. Sed commodo tempus arcu a dapibus.
        <br /><br />
        Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.</p>
                <br /><br />
        Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.
                <br /><br />
        Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.
                <br /><br />
        Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.
    </div>
  </div>
</body>
EnzoTrompeneers
  • 1,031
  • 1
  • 14
  • 30
3

You need to give position to sticky element like top:0; This will work with position:sticky; Using position:fixed; is not good.

body {
  background-size: cover;
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
}

#topDiv {
  height: 50%;
  width: 100%;
  background: url(https://placehold.it/1000x200);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: sticky;
  top:0;
}

#bottomDiv {
  min-height: 50%;
}
<body id="background" onresize="VerticalAlign();">
  <div id="topDiv">
    <img id="icon">
  </div>
  <div id="bottomDiv">
    <div id="textBox">
      <h1 id="header" class="check-element">Header</h1>
      <h2 id="subheader1" class="moveSub1 check-element">Subheader</h2>
      <p id="text1" class="movePara1 check-element">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec leo quam. Proin vulputate convallis augue ornare faucibus. Etiam odio purus, efficitur at aliquam sed, congue pellentesque nisl. Donec ac ultrices neque, non accumsan ex. Suspendisse varius pharetra quam, vitae dapibus risus. Mauris vel orci mi. Vivamus a purus tempor, consectetur nulla sit amet, fermentum augue.
        <br /><br />
        Morbi aliquam leo mi, ac viverra neque maximus vel. Fusce non erat feugiat, viverra justo nec, euismod enim. Fusce ut nisi tellus. Vivamus efficitur at eros sed ultrices. Donec eget metus consequat, viverra nibh commodo, imperdiet mauris. Vivamus iaculis mi a nisi imperdiet gravida. Proin semper elementum dignissim. Fusce consectetur eget leo ac fringilla. Morbi mi nisi, feugiat eget pellentesque at, cursus eget ligula. Sed iaculis nunc nisl, eget vestibulum dui tincidunt vitae. Quisque elementum magna sit amet nulla facilisis, in malesuada nibh aliquet. Quisque urna ligula, faucibus eu urna pulvinar, viverra vestibulum dui. Fusce aliquam diam posuere odio tincidunt, quis posuere felis condimentum. Donec sollicitudin rhoncus leo ac ultricies. Sed commodo tempus arcu a dapibus.
        <br /><br />
        Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.</p>
                <br /><br />
        Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.
                <br /><br />
        Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.
                <br /><br />
        Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.
    </div>
  </div>
</body>
ElusiveCoder
  • 1,593
  • 1
  • 8
  • 23
  • Thanks for answering it works great! However, is there away to keep a gap underneath the topDiv and the text when scrolling? Currently the text goes straight up to the div. – Eddie Feb 27 '19 at 13:21
  • How is it possible to keep a gap beetween sticky and non-sticky element? It's kinda not feasible. – ElusiveCoder Feb 27 '19 at 13:26
  • No worries, is there a way you could suggest around this? – Eddie Feb 27 '19 at 13:32
  • @Eddie I always add a padding-top, margin-top or increase height of the parent element (when the height of the parent element contains a fixed value). Also when you are using this on smaller devices such as phones and/or tablets, you might want to use javascript (and perhaps to make things easy, use jquery resize event) in order to always calculae how big the bar is, so that you could tell how much space is required between the top. – Barrosy Feb 27 '19 at 13:53
  • @Barrosy thanks mate, I have got all the JavaScript and jQuery sorted. I have tried adding padding/margin-top but the text still goes straight upto the image. – Eddie Feb 27 '19 at 14:03
  • Could you make a fiddle of your problem and add a link here so I can take a look? @Eddie – Barrosy Feb 27 '19 at 14:08
  • @Barrosy https://jsfiddle.net/yeorf3wm/ thank you for taking a look! – Eddie Feb 27 '19 at 14:11
  • I am not very sure what you mean by gap, but if it is just white space you want, there are many ways to achieve this. The easiest one I was thinking of was using a border bottom: https://jsfiddle.net/o65Lvmhp/ – Barrosy Feb 27 '19 at 14:15
  • @Barrosy Thats great, thanks for your time – Eddie Feb 27 '19 at 14:53