Stopping background content from scrolling while using position: fixed

Is there a way to prevent content from scrolling behind a fixed position element?

Check out the demo here

.navbar-default {
  background-color: #4c68f9;
  margin-bottom: 0;
  border: none;
}
.navbar-default.affix {
  background-color: #4762ed;
  margin: auto;
  right: 0;
  left: 0;
  transition: all .6s ease-in-out;
}
.navbar-default.affix + .container {
  padding-top: 70px;
}
.navbar-default .nav-property,
.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
  color: #fff;
  font-weight: bold;
  padding: 30px 20px;
}
.navbar-default .navbar-brand {
  font-size: 32px;
}
.navbar-default .navbar-brand:hover {
  color: #fff;
}
@media screen and (max-width: 767px) {
  .navbar-default .navbar-nav {
    overflow: hidden;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-top: 80px;
  }
}
@media (min-width: 768px) {
  .navbar-default .navbar-nav > li {
    padding: 10px;
  }
}
.navbar-default .navbar-nav > li.active a,
.navbar-default .navbar-nav > li.active a:hover {
  background-color: transparent;
  color: #fff;
}
@media (min-width: 768px) {
  .navbar-default .navbar-nav > li.active a:after,
  .navbar-default .navbar-nav > li.active a:hover:after {
    width: calc(100% - 20px);
  }
}
.navbar-default .navbar-nav > li > a {
  font-size: 18px;
  font-weight: 500;
  padding: 20px 10px 10px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .navbar-default .navbar-nav > li > a {
    font-size: 30px;
    padding: 20px 10px;
  }
}
.navbar-default .navbar-nav > li > a:after {
  content: "";
  height: 2px;
  width: 0;
  background-color: #fff;
  transition: all .2s ease-in-out;
  margin: auto;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #fff;
}
.navbar-default .navbar-nav > li > a:hover:after,…

</div>
  </div>
  <div class="container">
    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam minus est aliquid tempore hic placeat eligendi corrupti! Aspernatur sint fuga minima, assumenda quo, obcaecati recusandae dolores sequi, eum culpa dicta!</h3>
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus laborum dignissimos blanditiis nostrum at quibusdam neque eum iusto, excepturi cupiditate voluptatibus ipsum, distinctio dolores, quis deleniti architecto libero iure suscipit.</h2>
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim laboriosam repellendus, tempore fugiat, eveniet dolorem quas error. Enim officiis, recusandae, dolorum sed…


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top" data-spy="affix" data-offset-top="1">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse in" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
      </ul>

    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<div class="container">
  <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam minus est aliquid tempore hic placeat eligendi corrupti! Aspernatur sint fuga minima, assumenda quo, obcaecati recusandae dolores sequi, eum culpa dicta!</h3>
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus laborum dignissimos blanditiis nostrum at quibusdam neque eum iusto, excepturi cupiditate voluptatibus ipsum, distinctio dolores, quis deleniti architecto libero iure suscipit.</h2>
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim laboriosam repellendus, tempore fugiat, eveniet dolorem quas error. Enim officiis, recusandae, dolorum sed…

htmlcsscss-positionz-index

Answer №1

Hey there! I've come up with a clever hack to help solve our problem.

NOTE: There may be a navigation class manipulation issue when the page loads for the first time, so please take a look at it.

Here's my solution using jQuery:

When you have your navigation open, it may interfere with the functionality of the body content. Taking this into consideration, I've implemented the following approach. Please review it in the fiddle provided.

$(document).ready(function(){
    $('body').addClass('hiddenApply');
    $('.navbar-toggle').on('click',function(){
       debugger;
       if($(this).attr('aria-expanded') === "false"){
           $('body').addClass('hiddenApply');
       }else{
       $('body').removeClass('hiddenApply');
       }
    });    
})
[CSS code here]
[HTML code here]

Feel free to check out the fiddle provided below for a demonstration of the hack:

Check it out

Answer №2

If you want to avoid having your bottom content overlap with the text in your fixed navigation bar when scrolling, you can simply add the class 'navbar-fixed-top' to your navigation tag like so -

<nav class="navbar navbar-default navbar-fixed-top">

To ensure that your content starts below the navbar, you can add some padding to the body element like this -

body { padding-top: 60px; }

Answer №3

To fix the alignment issue, simply delete the line bottom: 100%; from your CSS code under the class .navbar-default .navbar-collapse.

If you need to specify the height of the navbar, you'll need to remove height: 100%; as Bootstrap is overriding it. Replace it with height: 60px !important instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Glowing orbs in the night: a dark mode spectacle with

I have implemented a night mode (or perhaps dark mode) toggle button located at the top-right corner of my webpage. Here is a link to a perfect example showcasing what I am aiming for However, unlike the provided link, I switch between night mode and lig ...

javascripthtmlcsskeyframe

PHP code fails to set a hidden element within a form array

My current project involves sifting through a modest PHP application to debug and enhance it. One snag I've come across is that what should be updates are instead treated as deletes and inserts. To rectify this, I've made some adjustments. Speci ...

phphtml

Create a scrollable horizontal list of items

I am encountering an issue with my mat chip list in Angular Material. I have a mat chip list filled with mat-chips that I want to display in a single row. If there are more items than can fit on the screen, I would like the area to be scrollable horizonta ...

cssangular

Customizing CSS float labels for individual inputs

For my project, I've implemented CSS code to create a floating label effect for form inputs. If you need the original code reference, it can be accessed here. However, since there are multiple examples in the original codebase, I have extracted and m ...

csscss-animations

Creating a responsive navigation menu using Bootstrap 4 by merging data from various MySQL tables

I am struggling to create a bootstrap 4 nav-menu using the provided SQL query and code snippets. Below are the tables: TABLE menu -------------------------------------- | id | title | url | | 1 | Home | index.php | | 2 | M ...

phpcssmysqlbootstrap-4navbar

Dropdown menu with CSS arrow

I'm attempting to create something similar to this: Here's what I have so far: Html: <div class="panel-heading" data-toggle="collapse" href="#data2"> <div class="heading"> APPLICATION </div> <span clas ...

htmlcss

Maintaining Order with SCSS and Compass - Is it Possible?

Does compiled SCSS using Compass preserve the order of declarations? Can Compass guarantee the order of properties (assuming it's the way Compass operates that determines this)? This is mainly important when there are multiple definitions with the s ...

csssasscompass

Determining Text Color Based on Background Hue

Is it possible to create a div that dynamically changes text color based on the background color surrounding it? I want the text to switch between two different colors, with the font color being the opposite of the background color. For example, black text ...

htmlcsscolorsmix-blend-mode

How to attach an event listener to an input element using Angular

I am looking to add a listener to an input element that will be triggered every time the user changes the input values. The goal is to display the current values chosen by the user. Example HTML template: <div id="idDoseLabel1" class="da ...

javascripthtmlcssangulartypescript

The rows sent to HTML/Bootstrap from Java through JSON do not neatly wrap across rows evenly

I am having trouble getting images to wrap evenly on an HTML/Bootstrap page that are retrieved by Java and passed through JSON. Despite my expectations, there is a third row created with only one image and a fifth row with 3 extra images. Additionally, whe ...

javahtmljsonajaxtwitter-bootstrap

Identifying CSS on iPhone and iPad: A Guide

I need to adjust the CSS style based on different devices. This is how I currently have it set up: <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Destop.css")" media="only screen and (min-width: 1224px)"/> <link rel="s ...

htmlcss

Deselect an HTML checkbox using a corresponding label's "for" attribute

Below is the html code I am using to display a checkbox with an image: <div class="testClass"> <input id="111" name="compare_checkbox" type="checkbox" /> <label for="111"> <i class="icon" aria-hidden="true"&g ...

javascriptjqueryhtmlcheckbox

Adding items to a jCarousel using C# programming language is a simple process that involves following

I am struggling to display images in jcarousel using a C# Webmethod and jQuery Ajax. Here is my setup: My HTML structure: <div> <ul id="mycarousel" class="jcarousel-skin-tango" style="float: left"> </ul> </div ...

c#jqueryhtmljcarousel

Navigation problems resolved: The fixed-top class causes issues with navbar-right and obscures the logo

I have implemented a bootstrap Nav on this page To achieve a sticky top navigation, I used the fixed-top class. However, this caused the navbar to align left instead of right as intended. It also ended up covering my logo, which was originally aligned to ...

htmlcsstwitter-bootstrapbootstrap-4

How to hide text within a contenteditable element

I'm trying to create a contenteditable span that behaves like a password field in a Linux terminal; the text is entered, but not visible. I've experimented with different CSS properties like visibility: hidden and display: none, but they don&apos ...

htmlcss

Using JavaScript to transfer the data ID from a button to a form

I am working on a project where I have a button that triggers a modal: <button type="button" class="btn btn-primary add-subscription" data-toggle="modal" data-workspace_id="{{ workspace.id }}" data-target="# ...

javascripthtmlajaxforms

Having trouble getting CSS hover to work on hidden elements?

I am having trouble getting the rollover effect to work correctly on this page, and I can't seem to figure out what's causing the issue. My CSS is quite basic: open{visibility:hidden;} open:hover{visibility:visible;} If you would like to take ...

cssimagestyling

Showing ASP code within a DIV element (inline)

Working on setting up a 'shopping cart' feature on our website, but running into some issues with the ASP code. Does anyone have any advice to offer? In the image below, you can see that when items are added to the cart, the 'total' is ...

cssasp-classic

Bootstrap Card breaking out from the confines of its parent container

Attempting to replicate Bootstrap's Cards example in my project, I noticed that the top margin of each Card extends beyond the parent element, a border div. If you need more information on how to utilize Card, refer to Bootstrap's documentation ...

htmlcssbootstrap-5

Automatically altering variable without manual intervention

Hey there, I'm encountering a strange issue with the form below echo "<td class='contact-delete'> <form method='post' action='update_record.php'>"; echo "<button type='submit' value='" . $ ...

phphtml