One of our sub-offices uses a website where a logo banner appears when someone scrolls down. They were able to do this on a WordPress site using a plugin they don't pay for, hence I cannot update it. Bit of a snag. It is a basically static page I decided to mimic the site using HTML, CSS, and JavaScript (ow... and Bootstrap, come to think of it... not really sure why).

Anyway... I got stuck on the appearing banner. It appears just fine, but I cannot get it to be just as wide as the other <div>/<rows> elements with content. It either appears too wide or too narrow.

This is a code snippet of what I came up with:

window.onscroll = function() { scrollFunction()};

function scrollFunction(){
  console.log(document.documentElement.scrollTop);
  if (document.documentElement.scrollTop > 100){
    console.log('groter');
    document.getElementById("stayontop").classList.add('show'); 
    document.getElementById("stayontop").classList.remove('hide');
  }else{
    console.log('kleiner')
    document.getElementById("stayontop").classList.remove('show'); 
    document.getElementById("stayontop").classList.add('hide');
  }
};

#stayontop{
  position: fixed;
  z-index: 2;
  width: 100%;
  background-color: red;
  opacity: 50%;
}
#stayontop.hide{
  display: none;
}
#stayontop.show{
  display: block;
}
.short { background-color: yellow;}
.long { background-color: green;}

<div class="container">
  <div id="stayontop" class="row hide" align="center"><p>Stay on top</p></div>
  <div class="row short"><p>Nice and short</p></div>
  <div class="row long">
    <p>[A very long piece of tekst to force scrollbar. Snipper away for posting here]</p>
  </div>  
</div>

One of our sub-offices uses a website where a logo banner appears when someone scrolls down. They were able to do this on a WordPress site using a plugin they don't pay for, hence I cannot update it. Bit of a snag. It is a basically static page I decided to mimic the site using HTML, CSS, and JavaScript (ow... and Bootstrap, come to think of it... not really sure why).

Anyway... I got stuck on the appearing banner. It appears just fine, but I cannot get it to be just as wide as the other <div>/<rows> elements with content. It either appears too wide or too narrow.

This is a code snippet of what I came up with:

window.onscroll = function() { scrollFunction()};

function scrollFunction(){
  console.log(document.documentElement.scrollTop);
  if (document.documentElement.scrollTop > 100){
    console.log('groter');
    document.getElementById("stayontop").classList.add('show'); 
    document.getElementById("stayontop").classList.remove('hide');
  }else{
    console.log('kleiner')
    document.getElementById("stayontop").classList.remove('show'); 
    document.getElementById("stayontop").classList.add('hide');
  }
};

#stayontop{
  position: fixed;
  z-index: 2;
  width: 100%;
  background-color: red;
  opacity: 50%;
}
#stayontop.hide{
  display: none;
}
#stayontop.show{
  display: block;
}
.short { background-color: yellow;}
.long { background-color: green;}

<div class="container">
  <div id="stayontop" class="row hide" align="center"><p>Stay on top</p></div>
  <div class="row short"><p>Nice and short</p></div>
  <div class="row long">
    <p>[A very long piece of tekst to force scrollbar. Snipper away for posting here]</p>
  </div>  
</div>

As you can see: just a container with 3 rows. The last 2 are visible by default and fill the width of the container. The first <div> has an id "stayontop" and a class "hide".

In the CSS, the position and z-index are supposed to keep the div at the top of the page while the rest scrolls underneath it. Seems to work. The classes "hide" and "show" toggle the visibility. That seems to work, too.

The class is toggled using JavaScript shown in the code snippet.

This changes the hide or show based on the number of pixels scrolled. Works as expected.

But I cannot understand why the <div> "stayontop" does not have the same width as the other <div> elements.

Got a Codepen to fiddle around in: https://codepen.io/peter-kaagman/pen/zxYRydL

@Daniel Thank you... you're right. I was already wondering what happened to the 100% width. It did not solve my problem though: now the div is wider than the other div elements.

• javascript
• html
• css

• 2 Looks like you might just be missing the ; after z-index: 2 in your stayontop class – Daniel Black Commented Mar 18 at 14:07
• To improve readability and ease of review, I've converted your code into a code snippet (please see the menu at the top of the post editor, menu item <>). Please pay attention to your grammar and spelling; so many mistakes make it hard to understand. I've fixed what I can, please review your edited post after the approval. – Sergey A Kryukov Commented Mar 18 at 14:40
• Simply giving the #stayontop element the additional class container, so that the max-width for the different breakpoint applies, seems to fix the issue without doing any other damage. – C3roe Commented Mar 18 at 14:41

1 Answer 1

The stayontop element width is different for a couple reasons: (1) it is set to fixed position, removing it from the normal DOM flow, and (2) expecting it to flow like the non-fixed .container which has restrictions on max-width due to media queries.

Without changing too much, consider adding the container class to the element to give it the same max-width restrictions:

window.onscroll = function() { scrollFunction()};

function scrollFunction(){
  if (document.documentElement.scrollTop > 100){
    document.getElementById("stayontop").classList.add('show'); 
    document.getElementById("stayontop").classList.remove('hide');
  }else{
    document.getElementById("stayontop").classList.remove('show'); 
    document.getElementById("stayontop").classList.add('hide');
  }
};

#stayontop{
  position: fixed;
  z-index: 2;
  width: 100%;
  background-color: red;
  opacity: 50%;
}
#stayontop.hide{
  display: none;
}
#stayontop.show{
  display: block;
}

.short {
  background-color: yellow;
}

.long {
  background-color: green;

}

<link href="https://cdnjs.cloudflare/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div id="stayontop" class="container row hide" align="center"><p>Stay on top</p></div>
  <div class="row short"><p>Nice and short</p></div>
  <div class="row long">
    <p>You’ve probably heard of Lorem Ipsum before – it’s the most-used dummy text excerpt out there. People use it because it has a fairly normal distribution of letters and words (making it look like normal English), but it’s also Latin, which means your average reader won’t get distracted by trying to read it. It’s perfect for showcasing design work as it should look when fleshed out with text, because it allows viewers to focus on the design work itself, instead of the text. It’s also a great way to showcase the functionality of programs like word processors, font types, and more.</p>

    <p>We’ve taken Lorem Ipsum to the next level with our HTML-Ipsum tool. As you can see, this Lorem Ipsum is tailor-made for websites and other online projects that are based in HTML. Most web design projects use Lorem Ipsum excerpts to begin with, but you always have to spend an annoying extra minute or two formatting it properly for the web.</p>

    <p>Maybe you have a custom-styled ordered list you want to show off, or maybe you just want a long chunk of Lorem Ipsum that’s already wrapped in paragraph tags. No matter the need, we’ve put together a number of Lorem Ipsum samples ready to go with HTML tags and formatting in place. All you have to do is click the heading of any section on this page, and that HTML-Ipsum block is copied to your clipboard and ready to be loaded into a website redesign template, brand new design mockup, or any other digital project you might need dummy text for.</p>

    <p>No matter the project, please remember to replace your fancy HTML-Ipsum with real content before you go live - this is especially important if you're planning to implement a content-based marketing strategy for your new creation! Lorem Ipsum text is all well and good to demonstrate a design or project, but if you set a website loose on the Internet without replacing dummy text with relevant, high quality content, you’ll run into all sorts of potential Search Engine Optimization issues like thin content, duplicate content, and more.</p>

    <p>HTML-Ipsum is maintained by WebFX. For more information about us, please visit WebFX Reviews. To learn more about the industries we drive Internet marketing performormance for and our revenue driving services: SEO, PPC, social media, web design, local SEO and online advertising services.</p>
    <p>You’ve probably heard of Lorem Ipsum before – it’s the most-used dummy text excerpt out there. People use it because it has a fairly normal distribution of letters and words (making it look like normal English), but it’s also Latin, which means your average reader won’t get distracted by trying to read it. It’s perfect for showcasing design work as it should look when fleshed out with text, because it allows viewers to focus on the design work itself, instead of the text. It’s also a great way to showcase the functionality of programs like word processors, font types, and more.</p>

    <p>We’ve taken Lorem Ipsum to the next level with our HTML-Ipsum tool. As you can see, this Lorem Ipsum is tailor-made for websites and other online projects that are based in HTML. Most web design projects use Lorem Ipsum excerpts to begin with, but you always have to spend an annoying extra minute or two formatting it properly for the web.</p>

    <p>Maybe you have a custom-styled ordered list you want to show off, or maybe you just want a long chunk of Lorem Ipsum that’s already wrapped in paragraph tags. No matter the need, we’ve put together a number of Lorem Ipsum samples ready to go with HTML tags and formatting in place. All you have to do is click the heading of any section on this page, and that HTML-Ipsum block is copied to your clipboard and ready to be loaded into a website redesign template, brand new design mockup, or any other digital project you might need dummy text for.</p>

    <p>No matter the project, please remember to replace your fancy HTML-Ipsum with real content before you go live - this is especially important if you're planning to implement a content-based marketing strategy for your new creation! Lorem Ipsum text is all well and good to demonstrate a design or project, but if you set a website loose on the Internet without replacing dummy text with relevant, high quality content, you’ll run into all sorts of potential Search Engine Optimization issues like thin content, duplicate content, and more.</p>

    <p>HTML-Ipsum is maintained by WebFX. For more information about us, please visit WebFX Reviews. To learn more about the industries we drive Internet marketing performormance for and our revenue driving services: SEO, PPC, social media, web design, local SEO and online advertising services.</p>
  </div>  
</div>