The sticky sidebar feature in Bootstrap 4 is not functioning correctly as it scrolls with the page instead of

I'm trying to create a sticky right sidebar titled "Recent Posts in Category" on this page. I want it to stay fixed when the user scrolls down.

Since Bootstrap 4 no longer supports the affix feature, I attempted to accomplish this using CSS. I came across an example on codepen which worked well in my browser. Here is the code I added to my CSS file:

.make-me-sticky {
  position: -webkit-sticky;
    position: sticky;
    top: 0;
}

I then applied the class to the HTML div like so:

<div class="col-md-12 col-lg-4 sidebar make-me-sticky">

However, I am not seeing any effect. What could be causing this issue?

htmlcssbootstrap-4

Answer №1

    .stick-me-to-the-top {
          position: fixed;
          top: 0;
          right: 0;
          overflow: hidden;
          height: 100vh;
      }

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

Comparison of Head.js screen size and CSS3 @media query: benefits of prioritizing the former

What are the benefits of using Head.js screen size detection instead of CSS3 media queries? Head.js Screen Size Detection .lt-1024 #hero { background-image: (medium.jpg); } CSS3 @media query @media only screen and (max-width: 1024px) { #hero { back ...

csshead.js

As the window size decreases, adjust the negative left margin to increase dynamically

Is there a way to adjust the margin-left property of mydiv-2 to become increasingly negative as the browser window is scaled down horizontally? #mydiv-1{ background-color:orange; width:60%; height:400px; margin-left: 150px } #mydiv-2{ backgr ...

javascriptjquerycss

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

What is the best method for obtaining a modified image (img) source (src) on the server side?

Having some trouble with a concept in ASP.Net that's causing me quite the headache. I am fairly new to ASP.Net and struggling with something that seems much easier in PHP. I created an img element with an empty src attribute : <img runat="server" ...

c#javascriptasp.nethtml

Display a div with a link button when hovering over an image

Currently, I'm attempting to display a link button within a div that will redirect the user to a specified link upon clicking. Unfortunately, my current implementation is not functioning as expected. I have provided the code below for reference - plea ...

c#javascriptjqueryhtmlcss

What is the best way to target the final n children using CSS?

Is there a way in CSS to target and style the last N elements of a parent container? The number of elements we want to match is not fixed, but could vary. How can this be achieved using CSS? ...

csscss-selectors

css failing to load properly following javascript redirection

Upon clicking the button labeled id=cancel, the user will be directed to index.php. $('#cancel').click(function() { if(changes > 0){ $('#dialog-confirm').dialog('open'); }else{ window.location.href = ". ...

javascriptjqueryhtmlcssdom

Quotation Marks Leading to a Page Error

Looking for some help with a tricky coding issue I've been struggling with. The code snippet below is causing me frustration: I'm trying to display a series of A-Z links in my PHP file: <div> <ul id="AZList"> <li><a ...

phpjavascripthtml

What causes the issue of JavaScript code not loading when injected into a Bootstrap 4 Modal?

I've created a JavaScript function that triggers the opening of a Bootstrap Modal Dialog: function displayModal(message, headerMessage, sticky, noFooter){ var modal = $('<div />', { class: 'modal fade hide ...

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-4

A method to incorporate the profile_pic attribute from a different model into a single model

I need to display the profile picture in the Blog View page that is stored in the Profile model models.py class Profile(models.Model): user = models.OneToOneField(User,null=True, on_delete=models.CASCADE) bio = models.TextField() profile_pic = ...

htmldjangodjango-models

How can I eliminate the gaps in the exterior of Google's Material Design Icons?

Query: I've encountered difficulty in removing the whitespace around Google's Material Design icons, despite searching for solutions on Google and the Material Design icons guide. It's unclear whether the solution is simple and I'm over ...

htmlcssmaterial-designfont-awesomereset

Tips for effectively submitting a form to Flask using AJAX

As someone who is new to Python and AJAX, I have encountered an issue with my app.py and app.html files. Instead of displaying the desired result, a whole form is replacing it. Can anyone help me with this problem? Below is the code snippet: from flask i ...

javascriptjquerypythonhtmlajax

Is there anything I can modify in either the HTML or CSS code to achieve the desktop layout I envisioned?

I have been striving to replicate this https://i.sstatic.net/B0Qkb.jpg desktop design. The mobile version has already been crafted, but when I attempt to adapt it for desktop, I'm utilizing a specific flex property called row-reverse. However, the ou ...

htmlcssflexbox

Certain parts of the CSS grid are not aligning properly within the grid lines

I'm having trouble with my CSS grid. The red section fits in the first square, but the rest of the content seems to be out of place in the grid. I'm new to all this and I can't figure out what I'm missing. I've tried everything but ...

csscss-grid

Using single-line ellipsis with the Material-UI select and option components

I have a TableHead Component with multiple columns. Among them is a <Select> element that allows users to filter the table content based on one of four statuses. I am trying to implement an ellipsis at the end of the option string if it exceeds its c ...

cssreactjsmaterial-ui

What is the best way to position two out of the three link tags to the right side?

This is the code snippet I am currently working with: <table> <tr> <td>&nbsp;</td> <td> <a id="btnAutoSuggest">Suggest Title</a> <a id="btnOK">OK</a> <a id ...

htmlcss

Display the background-image of the <body> element only when the image has finished loading

I have a webpage where I want to delay showing a large image until it has finished downloading. Instead, I would like to display a background with a fading effect while the image loads. The challenge is that the background image must be set within the bod ...

jqueryhtmlcsshidebackground-image

Transform object into JSON format

Is there a way to transform an object into JSON and display it on an HTML page? let userInfo = { firstName: "O", lastName: "K", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b44476b445b05484446">[ema ...

htmljsonangular

Disappearing Into the Background Excluding Specific Divs

I have a dilemma with fading in and out a background image using jQuery fadeIn and fadeOut. The issue arises because my wrapper div contains elements such as sidebar and navigation that are positioned absolutely within the wrapper div, causing them to also ...

javascriptjqueryhtmlcss

My footer is now overlaying both my content and navbar

I am facing an issue with my footer. When I test my new footer, it ends up covering the content and navbar. I have been trying to figure out how to solve this problem but haven't had any luck yet. Hopefully, I can find some answers here... $(".toge ...

htmlcss