The static sidebar on glass-themed website built with Bootstrap 5 is malfunctioning

Greetings Esteemed Developers I am a newcomer to web development and I have been practicing. However, I encounter difficulties with my CSS at times. Today, I have a query for you all; I am trying to create a fixed sidebar but I am facing challenges. Despite extensive research and attempts, I have not been successful in achieving the desired outcome. Hence, I am reaching out here for assistance. Below is my code snippet:

$(document).ready(function () {
    $('#mySidebtn').click(()=>{
        $('.sidebg').toggleClass('hideSidebar')
        $('.sidebar').toggleClass('hideSidebar')
    })
})
Your CSS code snippet here
Your HTML code snippet here

Summary: My objective is to create a fixed sidebar that remains in place when users scroll through the content. Any insights or guidance on how to achieve this will be greatly appreciated.

jquerycssoverflowsidebarbootstrap-5

Answer №1

To achieve a fixed position for the sidebar, you should remove the `height` property from both the sidebar and its parent element. Instead, you can utilize the `position: sticky` CSS property.

Take a look at the code snippet below with the necessary updates:

$(document).ready(function () {
    $('#mySidebtn').click(()=>{
        $('.sidebg').toggleClass('hideSidebar')
        $('.sidebar').toggleClass('hideSidebar')
    })
})
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

// Rest of the CSS code goes here


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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">

    <title>Hello, world!</title>
</head>

<body>
    <div class="container bg-transparent vh-90 my-3 rounded  overflowC">
        <div class="row">
            <div class="col-md-12 navbg posRel d-flex justify-content-around align-items-center">
                <!-- Other HTML content -->
            </div>
        </div>
        <div class="row ">
            <div class="col-2 sidebg justify-content-center w0" style="transition: .3s;">
                <div class="sidebar w0" style="transition: .3s;">
                    <!-- Sidebar links go here -->
                </div>
            </div>
            <div class="col-md-9">
                <h2>Content Goes Here</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
            </div>
        </div>
    </div>
    <div class="box-top-right boxes"></div>
    <div class="box-bottom-left boxes"></div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="./script.js"></script>
</body>

</html>

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

The jCapSLide Jquery Plugin is experiencing compatibility issues in Chrome browser

While this JQuery plugin works perfectly in Internet Explorer and Firefox, it seems to be malfunctioning in Chrome. The plugin is not being recognized at all by Chrome, and the captions are appearing below the image instead of on top with a sliding effect. ...

javascriptjquerycssgoogle-chrome

Using regular expressions to validate input in Javascript

Seeking assistance to validate an input text using the pattern <some_string>:<some_string> in JS/JQuery. For instance: A110:B120 AB12C:B123 I understand this might seem overly simplistic, but any guidance would be greatly appreciated. ...

javascriptjqueryregex

Get immediate results in real-time

On a specific page, I have a form that I want to submit and receive a result upon submission. To display the returned data in a div, I've included this code: <script type="text/javascript"> $(function(){ $('#ff').form ...

phpjqueryajax

CSS - using numbers to create dynamic background images

I am looking to create a design where the background images in CSS display increasing numbers per article, like this example: This idea is similar to another post on Stack Overflow discussing using text as background images for CSS. You can find it here: ...

javascriptjqueryhtmlcss

Content that is dynamically generated by a database

I have been working on creating a unique wall feature for my website, inspired by Facebook. My aim is to allow users to submit form data and have it validated before storing it in a database. Additionally, I want this stored data to be displayed in a desig ...

javascriptphpjqueryhtmlfacebook

Exciting effects activated by hovering on a button

I'm attempting to create an animated effect by having a rectangle expand over the button when hovered by the user. However, I am unsure how to achieve this and have hit a roadblock. Here's what I want: There's a button. There's a rect ...

htmlcssanimationhovertransition

Convert the value of a Javascript variable into a PHP variable

I am feeling confused about how to pass JavaScript variables to PHP variables. Currently, I have a PHP session named example_survey and three buttons with jQuery attributes. When a button is clicked, it triggers a jQuery click event and passes the attribut ...

javascriptphpjquery

The API response was blocked due to the CORS header "Access-control-allow-origin."

I have an index.html file that is used for making HTML and Ajax calls. When I run the file through localhost, the API works perfectly. However, if I directly open the index.html file in Google Chrome or Mozilla Firefox, I encounter a CORS (Cross-Origin Re ...

javascriptphphtmljquerylaravel

Rotating through elements in timed intervals

After exploring various examples of how to show/hide divs with a JavaScript timeout, I am still unable to resolve my specific issue. I currently have six divs that I want to cycle through sequentially every 10 seconds, starting with div #one. Although my ...

javascripthtmljquery

Covering the entire screen, the Div element takes up the entirety of

Just like with other pages, the main div always takes up the entire screen visible to the user. As they scroll down, another div becomes visible: example1 , example2 Regardless of the screen size, the main div will always fill the space visible to the use ...

javascripthtmlcss

Ajax is updating the initial row of an HTML table while the subsequent rows remain unchanged and retain their default values upon modification

I need help with updating the status of a user, similar to what is discussed in this post. The issue I am facing is that only the first row of the table updates correctly. Regardless of the selected value from the dropdown list on other rows, the displaye ...

javascriptjqueryajax

Ways to center an image without relying on margin or padding to achieve alignment

Is it possible to center all tags except for the img without using margins or paddings? header { display: flex; flex-direction: column; align-items: center; } .logo { border-radius: 50%; width: 100px; height: 100px; margin: 10px 0 0 10px; ...

htmlcss

Updating a CSS file through jQuery is proving to be ineffective

After searching extensively on Stack Overflow and other websites, I have not been able to find a clear answer to my question regarding changing a CSS class (#navbar a) after a specific function is triggered. My understanding of jQuery and JavaScript is lim ...

jqueryhtmlcss

What is the best method for enabling HTML tags when using the TinyMCE paste plugin?

After spending countless hours searching for a solution, I am still puzzled by this problem. My ultimate goal is to have two modes in my powerful TinyMCE editor: Allowing the pasting of HTML or Word/OpenOffice text with all styles and formatting attribu ...

javascriptjqueryjquery-pluginstinymcewysiwyg

Avoid data from being reloaded using the select2 plugin version 4

I'm utilizing the select2 plugin(v4) and using ajax to load its options. When I initially open the select input, the data is loaded. However, when I reopen the select, the same data is reloaded. Is there a way to prevent this constant "reloading" ...

jqueryajaxjquery-select2jquery-select2-4

Because of the CSS tree structure, it is not possible to add or remove classes. This restriction applies to all actions done in jQuery, including click

I want to create a hover effect where the CSS changes when hovering over an item, then reverts back to normal when no longer hovered. Additionally, I would like the CSS to change when the item is selected, and return to normal when another item in the same ...

javascriptjquerycss

Alert users before visiting external websites

Is there a way to notify users about external pages without using popups like in the first example here: https://i.sstatic.net/5QJLu.png Instead of the unwanted code shown above, is there an alternative solution? Is there a different approach that can be ...

javascripthtmljquerycsshyperlink

Distinguishing Font Sizes in Safari Compared to UIWebView

When the page is loaded in Safari, everything looks perfect. However, when viewed in a UIWebView, all the fonts appear enlarged. I've done my research and tried various solutions like: - Setting WebView.scalesPageToFit = true - Applying default con ...

ioscssswiftuiwebview

Exploring the power of colors in Tailwind CSS and Material UI for your CSS/SCSS styling

Discovering unique color palettes like the Tailwind Color for Tailwind CSS and theMaterial UI colors has been inspiring. These collections offer a range of beautifully named colors from 100 to 900 and A100 to A400, reminiscent of font styles. I am intrig ...

csssassmaterial-uimaterializetailwind-css

Displaying the content of a modal window

I am working on a modal that needs to print only the content within it, nothing else. Here is the setup for the button inside the modal: This should not be printed... <button id="btnPrint">Print (this btn should not be printed!)</button> ...

htmlcssangularjsbootstrap-modalangularjs-ng-click