Conceal the information beneath a see-through fixed navigation bar when scrolling downward

Question

Conceal the information beneath a see-through fixed navigation bar when scrolling downward

the issue: I am facing a challenge with my transparent fixed navbar that has a margin-top gap. The content below the navbar needs to be positioned under it while scrolling down, but the background of the page is a dynamic slideshow of various images. This makes it difficult to use z-index to hide the navbar by changing the background color or using an image.

To summarize:

Transparent fixed navbar with a margin gap
Dynamic image background
Global scrolling required (cannot use scrolling for div content)
Using bootstrap 3

Illustrations:

INCORRECT: [Current appearance][1]

CORRECT: [Desired appearance][2]

  [1]: https://i.sstatic.net/Iwc1h.png
  [2]: https://i.sstatic.net/f1Sbd.png

Apologies for any confusion, here is the code: http://jsfiddle.net/5myw4e26/

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

To maintain a fixed position for your navbar, incorporate an empty top div with a left float and adjust its height to match the navbar's dimensions.

Answer 2

To maintain a fixed position for your navbar, incorporate an empty top div with a left float and adjust its height to match the navbar's dimensions.

Answer 3

Answer №2

I successfully accomplished the task you were attempting. While it may not be the optimal solution, it does the job.

With the help of JQuery, I determined when a paragraph (p.content) and the navigation-bar intersected.

There is room for refinement, allowing you to tailor it to your specific requirements.

JQuery

$(document).ready(function() {
      $(document).scroll(function() {
        $("p").each(function() {
          if ($(this).offset().top <= $(document).scrollTop() + 32) {
            $(this).css("opacity", "0");
          } else {
            $(this).css("opacity", "1");
          }
        });
      });
    });

Note that the 32 in

$(this).offset().top <= $(document).scrollTop() + 32

represents the height of the navigation bar.

Example:

$(document).ready(function() {
  $(document).scroll(function() {
    $("p").each(function() {
      if ($(this).offset().top <= $(document).scrollTop() + 32) {
        $(this).css("opacity", "0");
      } else {
        $(this).css("opacity", "1");
      }
    });
  });
});

body {
  margin: 0px;
  font-family: Arial;
  font-size: 12px;
  min-height: 2000px;
}
nav {
  width: 100%;
  height: 32px;
  line-height: 32px;
  text-align: center;
  position: fixed;
  top: 0;
  border-bottom: 1px solid black;
}
p.content {
  margin: 12px 0px 0px 0px;
  background: yellow;
}
p:first-of-type {
  margin: 44px 0px 0px 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="wrapper">
  <nav>
    Navigation Bar
  </nav>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed dolor metus. Morbi tristique nisl vel lectus rutrum, non ultricies dolor feugiat. Fusce nec dolor in purus consectetur lacinia non sit amet turpis. Donec facilisis tortor mauris, nec vulputate
    massa fermentum vel. Praesent in neque quis lacus hendrerit tincidunt sed et dolor. Nullam fermentum, orci at pulvinar imperdiet, lacus libero facilisis ante, sit amet venenatis sem tortor in nibh. Ut ullamcorper porta fermentum. Praesent faucibus,
    erat eget iaculis porttitor, purus purus posuere nulla, eget lacinia odio libero in lectus. Vivamus sem ex, commodo ac tortor ut, fringilla vulputate eros. Ut iaculis augue non ipsum porttitor ornare.</p>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis tellus luctus ornare hendrerit. Curabitur hendrerit justo ante. Maecenas scelerisque ligula condimentum, aliquam tortor sit amet, aliquam lacus. Interdum et malesuada fames ac
    ante ipsum primis in faucibus. Ut ut augue vel massa tempus laoreet. Nulla porttitor, sem ac aliquet facilisis, purus ligula pulvinar ipsum, quis volutpat enim elit sed ante. Pellentesque quis diam vestibulum, viverra elit at, sollicitudin mi. Vivamus
    vehicula ex eu justo feugiat, a ullamcorper nisi commodo. Phasellus sed tortor eget purus mollis tempor at sit amet libero. Fusce tincidunt est est, tristique pretium justo feugiat eget. Donec et lacus vehicula, aliquam sapien a, eleifend tortor.</p>

  <p class="content">Vivamus vitae placerat elit. Integer eleifend nibh at purus suscipit rutrum. Aliquam et fermentum mauris. Aenean gravida velit a vehicula aliquet. Duis neque tortor, luctus eget condimentum eget, venenatis eget lorem. Maecenas sed ullamcorper tellus.
    Donec euismod bibendum nunc, non ullamcorper neque cursus eget. Curabitur dapibus orci non quam vestibulum ornare. Aenean tincidunt interdum justo faucibus feugiat. Proin molestie lorem ultricies neque consequat, commodo cursus nisl molestie. Donec
    gravida viverra nisl, consectetur laoreet libero interdum ac. Vivamus varius vestibulum quam eu rutrum. Pellentesque id rhoncus massa.</p>

  <p class="content">Nunc finibus leo mollis efficitur tempus. Suspendisse ac elit lectus. Proin auctor ipsum faucibus arcu cursus congue. Nam rutrum odio non enim euismod auctor id in justo. Ut non sagittis orci, vel tincidunt elit. Mauris odio sem, varius eget tortor
    at, commodo pretium massa. Cras sed rhoncus dolor, non dictum sem. Curabitur in imperdiet turpis, in imperdiet mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas erat nisl, sagittis id eleifend ut, consequat eget orci. Aenean
    blandit arcu non varius ornare.</p>

  <p class="content">Pellentesque molestie consectetur lectus in iaculis. Curabitur efficitur ac nisi vitae eleifend. Morbi semper tristique ornare. Morbi in cursus mauris. Morbi et risus velit. Etiam lobortis commodo dolor, ac pulvinar dolor gravida vel. Donec sollicitudin
    metus urna, eu consequat magna vehicula a. Vivamus interdum, enim non consequat ultrices, lacus enim vehicula ante, vitae tristique tellus nibh sit amet eros. Aliquam consequat eu orci id rutrum. Donec lacus eros, eleifend et viverra vitae, congue
    at turpis. Quisque rhoncus fermentum ex sed lobortis. Fusce luctus, lorem vitae condimentum gravida, nibh tortor elementum nulla, id auctor nisl ex eu lectus. Donec auctor ligula sem, et porttitor neque eleifend vitae. Aliquam felis lacus, sollicitudin
    laoreet dui mollis, scelerisque auctor metus.</p>
</div>

Answer 4

I successfully accomplished the task you were attempting. While it may not be the optimal solution, it does the job.

With the help of JQuery, I determined when a paragraph (p.content) and the navigation-bar intersected.

There is room for refinement, allowing you to tailor it to your specific requirements.

JQuery

$(document).ready(function() {
      $(document).scroll(function() {
        $("p").each(function() {
          if ($(this).offset().top <= $(document).scrollTop() + 32) {
            $(this).css("opacity", "0");
          } else {
            $(this).css("opacity", "1");
          }
        });
      });
    });

Note that the 32 in

$(this).offset().top <= $(document).scrollTop() + 32

represents the height of the navigation bar.

Example:

$(document).ready(function() {
  $(document).scroll(function() {
    $("p").each(function() {
      if ($(this).offset().top <= $(document).scrollTop() + 32) {
        $(this).css("opacity", "0");
      } else {
        $(this).css("opacity", "1");
      }
    });
  });
});

body {
  margin: 0px;
  font-family: Arial;
  font-size: 12px;
  min-height: 2000px;
}
nav {
  width: 100%;
  height: 32px;
  line-height: 32px;
  text-align: center;
  position: fixed;
  top: 0;
  border-bottom: 1px solid black;
}
p.content {
  margin: 12px 0px 0px 0px;
  background: yellow;
}
p:first-of-type {
  margin: 44px 0px 0px 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="wrapper">
  <nav>
    Navigation Bar
  </nav>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed dolor metus. Morbi tristique nisl vel lectus rutrum, non ultricies dolor feugiat. Fusce nec dolor in purus consectetur lacinia non sit amet turpis. Donec facilisis tortor mauris, nec vulputate
    massa fermentum vel. Praesent in neque quis lacus hendrerit tincidunt sed et dolor. Nullam fermentum, orci at pulvinar imperdiet, lacus libero facilisis ante, sit amet venenatis sem tortor in nibh. Ut ullamcorper porta fermentum. Praesent faucibus,
    erat eget iaculis porttitor, purus purus posuere nulla, eget lacinia odio libero in lectus. Vivamus sem ex, commodo ac tortor ut, fringilla vulputate eros. Ut iaculis augue non ipsum porttitor ornare.</p>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis tellus luctus ornare hendrerit. Curabitur hendrerit justo ante. Maecenas scelerisque ligula condimentum, aliquam tortor sit amet, aliquam lacus. Interdum et malesuada fames ac
    ante ipsum primis in faucibus. Ut ut augue vel massa tempus laoreet. Nulla porttitor, sem ac aliquet facilisis, purus ligula pulvinar ipsum, quis volutpat enim elit sed ante. Pellentesque quis diam vestibulum, viverra elit at, sollicitudin mi. Vivamus
    vehicula ex eu justo feugiat, a ullamcorper nisi commodo. Phasellus sed tortor eget purus mollis tempor at sit amet libero. Fusce tincidunt est est, tristique pretium justo feugiat eget. Donec et lacus vehicula, aliquam sapien a, eleifend tortor.</p>

  <p class="content">Vivamus vitae placerat elit. Integer eleifend nibh at purus suscipit rutrum. Aliquam et fermentum mauris. Aenean gravida velit a vehicula aliquet. Duis neque tortor, luctus eget condimentum eget, venenatis eget lorem. Maecenas sed ullamcorper tellus.
    Donec euismod bibendum nunc, non ullamcorper neque cursus eget. Curabitur dapibus orci non quam vestibulum ornare. Aenean tincidunt interdum justo faucibus feugiat. Proin molestie lorem ultricies neque consequat, commodo cursus nisl molestie. Donec
    gravida viverra nisl, consectetur laoreet libero interdum ac. Vivamus varius vestibulum quam eu rutrum. Pellentesque id rhoncus massa.</p>

  <p class="content">Nunc finibus leo mollis efficitur tempus. Suspendisse ac elit lectus. Proin auctor ipsum faucibus arcu cursus congue. Nam rutrum odio non enim euismod auctor id in justo. Ut non sagittis orci, vel tincidunt elit. Mauris odio sem, varius eget tortor
    at, commodo pretium massa. Cras sed rhoncus dolor, non dictum sem. Curabitur in imperdiet turpis, in imperdiet mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas erat nisl, sagittis id eleifend ut, consequat eget orci. Aenean
    blandit arcu non varius ornare.</p>

  <p class="content">Pellentesque molestie consectetur lectus in iaculis. Curabitur efficitur ac nisi vitae eleifend. Morbi semper tristique ornare. Morbi in cursus mauris. Morbi et risus velit. Etiam lobortis commodo dolor, ac pulvinar dolor gravida vel. Donec sollicitudin
    metus urna, eu consequat magna vehicula a. Vivamus interdum, enim non consequat ultrices, lacus enim vehicula ante, vitae tristique tellus nibh sit amet eros. Aliquam consequat eu orci id rutrum. Donec lacus eros, eleifend et viverra vitae, congue
    at turpis. Quisque rhoncus fermentum ex sed lobortis. Fusce luctus, lorem vitae condimentum gravida, nibh tortor elementum nulla, id auctor nisl ex eu lectus. Donec auctor ligula sem, et porttitor neque eleifend vitae. Aliquam felis lacus, sollicitudin
    laoreet dui mollis, scelerisque auctor metus.</p>
</div>

Conceal the information beneath a see-through fixed navigation bar when scrolling downward

Answer №1

Answer №2

Similar questions

Center a vertically aligned element following a heading, with the content dynamically generated and enclosed in a fixed container

Unable to Display Embed Request Using Javascript in IE9 and IE10

Troubleshooting: Custom icons not displaying in Next.js application

Is there a way to retrieve the dynamically generated text content of an element using document.write?

Implementing an HTML5 Media Player with AngularJs via the $http Service

Intercepting HTTP responses to handle headers

React is throwing an error that says, "You cannot use the import statement outside a

Leveraging the power of express, employing the await keyword, utilizing catch blocks, and utilizing the next

Avoiding Page Reloads with Ajax while Removing Entries from a Table in Laravel

Validate input strings in Node.js using Joi to detect and return an error if there are leading or trailing spaces

Whenever I press a button, the data fails to be sent to the changePassword.php file using ajax in jquery

updating information automatically on page every X seconds for Angular component

The Issue with Non-Functional Links in Nivo Slider

Regular expressions can be created to only allow alphabets from a to z and specific special characters like (', -). Another regular expression can be formulated to restrict input to only alphabets, digits, and other selected special

Leveraging JavaScript functions for invoking Ajax requests, accompanied by ASP.NET controls

Is there a way to customize the design of the "Browse" button within the HTML file upload control?

How can a div be positioned outside of an overflow scroll without resorting to absolute positioning?

Populate an array with the present date and proceed in reverse order

Trouble with executing two asynchronous AJAX calls simultaneously in ASP.NET using jQuery

Combining an Angular factory with another factory