"What could be causing the sticky sidebar to not float as intended

Take a peek at this example where I implement the affix for the right sidebar (unfortunately, Bootstrap 4 doesn't have true affixes) - Violy Theme Right Sidebar Example. The sticky behavior is achieved through this style:

.sidebar {
    border-radius: 20px;
    padding: 25px 25px;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

However, when I try to replicate the sticky behavior in CSS on my own page here, nothing seems to work as expected and the right sidebar scrolls with the text instead. What could be causing this issue?

It seems that just explaining the issue may not be enough to provide a solution, so I recommend inspecting the styles and elements using browser Developer Tools on both pages.

htmlcssbootstrap-4

Answer №1

There are various reasons why this issue may occur: The position sticky feature is likely to not function if the overflow property is set to hidden, scroll, or auto on any of the parent elements.

Upon reviewing your website, I noticed that its parent element:

<header id="head_page">...</header>
<section class="wrapper>
<!--- here we find the sidebar -->
</section>
<footer id="footer>...<footer>

contains an overflow: hidden; property, and after removing it, the position: sticky; attribute started functioning correctly once again.

Answer №2

UPDATE: Check out @despotes' handy solution that maintains the use of sticky positioning on the webpage.

I'm keeping my fixed positioning method here for future users to reference.

Here's an alternative approach using fixed positioning that is widely supported:

CSS

.sidebar {
  position:fixed;
  top:425px;
}

jQuery

$(document).ready(function(){      
      $(window).scroll(function() { 
        if ($(document).scrollTop() > XX) { //value will need to be determined
          $('.sidebar').css('top','25';
          }
        if ($(document).scrollTop() < XX) { // same value but add 1
          $('.sidebar').css('top','425';
        }
      });
      
});

Essentially, once the user scrolls past XX, the sidebar will be positioned 25px below the screen's top, and when below XX, it will be situated at 425px from the top. This can be adjusted with more trigger points for a smoother effect.

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

Display a div when hovering over an image using jQuery

I've spent a good 30 minutes searching on Stack Overflow for a solution, but I haven't been able to find it yet. It's possible that I'm not sure what exactly to look for. Essentially, I have a div that contains an image and some text. ...

javascriptjqueryhtmlcss

Using CodeIgniter to dynamically load colors from a database into a CSS color selector

My views are populated by an array that holds all the necessary information... This array also includes user profile data, with a link key and color value specified... Is there a way to pass this information into the CSS color selector so that each user& ...

phpcsscodeignitercolors

In the Bootstrap grid, the first two rows are tightly packed with no empty space between them

Currently working on coding a footer with a grid/table using Bootstrap 4. However, encountering an issue where there's no spacing between the first and second rows in the grid. Oddly enough, there is spacing between all other columns. Can anyone provi ...

cssbootstrap-4

Error encountered during submission due to integrity issues

I am currently working on an application that allows users to report a film to the admin database. The issue I am facing is that when I try to report a movie by clicking on the report button and filling out the report_form template, I encounter the followi ...

pythonhtmlmysqldjango

Issues with CSS transitions/animations not functioning properly across different browsers

Take a look at this FIDDLE Link. I'm facing an issue where the animation works smoothly in Firefox, but it's not functioning as expected in Chrome. Kindly open the fiddle in both browsers (Chrome and Firefox), hover over the image, and notice t ...

htmlcss

Blocking users on a PHP social networking platform

I'm in the process of developing a social networking platform and I am currently working on adding a feature that allows users to block other users. However, I am facing challenges when it comes to implementing this feature. In my database, there is ...

phphtmlmysql

Removing sort icon from the first column of a DataTable using jQuery

Is there a way to completely disable the sorting property in the dataTable API? I tried using bsort:false to disable sorting in all columns, which works fine, but the first column still displays the sort icon. Why is that? $("#reportgrid").DataTable({ ...

jquerycsssortingdatatableremoveclass

How to apply jQuery addClass to only the following target element and not all elements on the entire webpage

Currently, I am using jQuery to create an animation effect on a hidden element (which is an image description) so that it becomes visible when hovering over an image. Although the code snippet I found does work, it has a downside - all the hidden image de ...

jquerycss

Is there a way to generate a distinctive curved design using CSS for a

I am currently using CSS and div elements in an attempt to create these particular lines: https://i.stack.imgur.com/Ytowq.png .line { width: 1px; height: 100px; background-color: black; position: absolute; border-radius: 50%/100px 1 ...

javascripthtmlcss

The issue of consistently receiving a null value when trying to choose a selection from a

The drop-down menu below failed to meet the required criteria in my validation and kept prompting me to select an option, even though one had already been chosen. <div class="col"> <label for="#">College Degree</label ...

htmldrop-down-menularavel-8

Changing pages in Django with a single click of a line: A step-by-step guide

As a beginner in Django, I am looking to create views that change when a line in an HTML tag is clicked. The idea is to open a new view named after the hash inside the <code>Hash tag. {% load staticfiles %} <!DOCTYPE html> <html lang="fr"&g ...

pythonhtmldjangopython-2.7django-views

Tips for constraining elements to set heights according to content in "stepped" increments

Is there a way to have "step-based heights" on a div? I created a small example to illustrate my question. My goal is to make sure that each box has a height that is a multiple of 400px. For instance, if a box with height: auto; is 345px, it should displa ...

htmlcss

Override the foundation SASS property for an element identified by its unique ID

Is it possible to override properties for a specific element with an ID using Foundation and Sass? I need to customize the style of a <section id='myid'> element by overriding certain properties: #myid { background: blue; color: whi ...

csssasszurb-foundation

Integrating objects into the <select> element through the combination of C#, JavaScript, and HTML connected to a SQL

Can someone assist me in resolving this issue? I am trying to populate an HTML element with database fields using C# and JavaScript, but so far my code is not producing any output. I have also attempted to include a button that calls the "loadGrp" function ...

javascriptc#htmlsql-server

Ways to specify the encoding for a text iframe embedded in a webpage

Can anyone help me with document embedding in HTML? In my current project, I am directly embedding my update logs as text files into the webpage, along with a selection menu to view all the updates. However, I ran into a minor issue where the Firefox cons ...

javascripthtmliframe

Tips for eliminating the page margin in Java when converting HTML using iTextPdf with HTMLConverter

No matter how hard I've tried, setting the body with padding: 0 and margin: 0, as well as attempting to set the doc() with setMargin, nothing seems to be effective ...

javahtmlcssitext

After toggling the class, Jquery will no longer select the button

I am having an issue with my jQuery code where I have a button that, when clicked, should switch classes from #testButton to .first or .second. The image toggle shows that the first click works fine and toggles the image, but the second click does not seem ...

javascriptjqueryhtml

The HTML page won't stop refreshing

I am having trouble with my admin login page code. Instead of redirecting, the page keeps refreshing. I have searched through numerous articles but have been unable to find a solution. Here is the code: <!DOCTYPE HTML> <HTML> <head> ...

phphtml

Steps for Adding an H1 Tag Using GWT

Forgive me for what may be a silly question, but I'm truly struggling to understand how to dynamically add an HTML heading tag to my page using the Google Web Toolkit. My motivation is not related to styling purposes, as any label can be styled. Inst ...

htmljquery-uigwt

When a link is entered into a textbox, the desired outcome is for it to display as a clickable link when viewed on a web page

I am looking to create a text box where I can input a link, store it in a MySQL database using PHP, and then display the link on a PHP page so that it behaves like the original link. For example: <form> <input type="" name="text" /> <input ...

phphtml