How can I fix an HTML object in place when scrolling right, but allow it to disappear from view when scrolling down?

I have a webpage with a header bar across the top. When the content of my page is too wide (typically caused by an embedded object) I would like the header bar across the top to still display across the entire width of the screen. However, when I scroll down on my page, I want this header bar to disappear from view.

Essentially, I want the header to behave like its position is "absolute" when scrolling down, but "fixed" when scrolling right. What is the best way to achieve this?

I tried using position: fixed, position: absolute, and position: sticky without any luck. I also spent some time looking for resources online that address this, but couldn't find anyone talking about this specifically.

Editing to include some of the code I have been using as a simple example. Since most people are suggesting position: sticky is the way to go, I gave that a try, but I assume I am not applying this properly since it is still not working as intended.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        .top-border {
            width: 100%;
            position: sticky;
            left: 0;
        }
        .content {
            margin-top: 60px;
            padding: 20px;
        }
        .box {
            width: 5000px;
            height: 2000px;
            background: linear-gradient(to right, grey, black);
        }
        .topborderthick {
            background-color: #155c35;
            height: 30px;
            width: 100%;
            top: 0;
            left: 0;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .topborderlight {
            background: #68a36b;
            height: 8px;
            width: 100%;
            top: 0;
            left: 0;
        }
        .headerbutton {
            color: #f2f2f2;
            padding: 5px;
            font-size: 15px;
            text-decoration: none;
            display: inline-block; 
            padding-right: 15px;
            padding-left: 15px;
            padding-top: 10px;
            padding-bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="top-border" class="top-border">
        <div class="topborderthick">
            <a class="headerbutton" href="#">HOME</a>
            <a class="headerbutton" href="#">ACCOUNT</a>
            <a class="headerbutton" href="#">LOGOUT</a>
        </div>
        <div class="topborderlight"></div>
    </div>
    <div class="content">
        <h1>This is an Example</h1>
        <p>The green bar at the top of the page should disappear from view when scrolling down, but should remain fixed in place when scrolling to the right.</p>
    </div>
    <div class="box"></div>
</body>
</html>

Solution

The problem is basically that widths were not defined.

You want the top bar to fill the viewport so this snippet gives it a width of 100vw but you want the body to be the full width of the content.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      width: fit-content;
    }
    
    .top-border {
      width: 100vw;
      /* was % */
      position: sticky;
      left: 0;
    }
    
    .content {
      margin-top: 60px;
      padding: 20px;
    }
    
    .box {
      width: 5000px;
      height: 2000px;
      background: linear-gradient(to right, grey, black);
    }
    
    .topborderthick {
      background-color: #155c35;
      height: 30px;
      width: 100%;
      /* was % */
      top: 0;
      left: 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    
    .topborderlight {
      background: #68a36b;
      height: 8px;
      width: 100%;
      top: 0;
      left: 0;
    }
    
    .headerbutton {
      color: #f2f2f2;
      padding: 5px;
      font-size: 15px;
      text-decoration: none;
      display: inline-block;
      padding-right: 15px;
      padding-left: 15px;
      padding-top: 10px;
      padding-bottom: 10px;
    }
  </style>
</head>

<body>
  <div id="top-border" class="top-border">
    <div class="topborderthick">
      <a class="headerbutton" href="#">HOME</a>
      <a class="headerbutton" href="#">ACCOUNT</a>
      <a class="headerbutton" href="#">LOGOUT</a>
    </div>
    <div class="topborderlight"></div>
  </div>
  <div class="content">
    <h1>This is an Example</h1>
    <p>The green bar at the top of the page should disappear from view when scrolling down, but should remain fixed in place when scrolling to the right.</p>
  </div>
  <div class="box"></div>
</body>

</html>