divs with sticky sidebars are a common design choice

I have a sidebar for each div and I want to make all the sidebars fixed when scrolling down.

You can find the code snippet here:

var tmpWindow = $(window),
    sidebar = $('.sidebar'),
    sidebarHeight = sidebar.height(),
    offsetBottom = $('.content').outerHeight();

$(window).scroll(function() {
    if ($(window).scrollTop() >= sidebarHeight) {
        $('.sidebar').addClass('fixed');
        alert(sidebarHeight);
    } else {
        $('.sidebar').addClass('fixed');
    }
});

http://jsfiddle.net/dLdvv6um/

If I implement this JavaScript, my sidebar disappears...

javascriptcsssidebarsticky

Answer №1

The instruction is to apply a class named "fixed", but your CSS does not have any styling under that class name. Consider using .css() for directly adding CSS properties, such as: .css({"position": "fixed"});.

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

Using ReactJS to create a Stacked Bar chart

I am encountering some challenges while trying to create a single stacked bar graph using data from an API. 1- The data I receive is not rounded, even when using % values. 2- Additionally, the total percentage does not always add up to 100%, causing the ...

javascriptreactjsgraphgraphicsbar-chart

Targeting Multiple Ids with ModalPopUp Extender

Greetings everyone! Let's get started! So, I have a couple of buttons on my page and I want to use one modal popup for both save clicks. Here is the code for the buttons: <asp:Button ID="btnSave1" runat="server" OnClick="btnSave1_Click" Text="Sa ...

javascriptajaxmodalpopupextenderconfirmbuttonextender

Tips for creating a side by side layout in Bootstrap modal content

I recently ventured into using Bootstrap and decided to create a simple modal based on the Bootstrap 4 documentation. You can check out the Bootstrap 4 modal for reference. The modal I created consists of two parts - Part 1 and Part 2, with a <hr> t ...

htmlcssbootstrap-4modal-dialogbootstrap-modal

What steps can be taken to resolve the error "Incompatible types: TodoItem undefined cannot be assigned to type TodoItem"?

I am currently in the process of learning TypeScript. Here is what's inside todoItem.ts: export class TodoItem { constructor( public id: number, public task: string, public complete: boolean = false ) {} printDetails(): void { ...

javascripttypescript

Utilizing PHP for Interactive JavaScript Modals

Encountering an issue with my JavaScript. The modal initially functions correctly, but upon clicking it for the second time, two modals appear - one from the previous click and another new one. The stacking of modals continues each time the button is cli ...

javascriptphpbootstrap-modal

Running a JavaScript script after loading a page via AJAX is not functioning as expected

As I am attempting to retrieve a page using AJAX, I've encountered an issue where any Javascript code included on that page fails to execute. Why is this happening? The simple JavaScript code present in my ajax page is as follows: <script type=" ...

phpjavascriptajaxgoogle-maps

Functioning on JSFIDDLE, though facing issues on .html files

I'm baffled. The code snippet below functions perfectly on JSFIDDLE, but it's not working properly on my own webpage. The code is supposed to duplicate everything inside the DIV element. To see it in action, check out this link to the working JSF ...

javascripthtml

Attempting to forward an image in a node-js/express application

I am facing an issue with a broken image link when trying to access it through Express: app.get('/fileThumbnail', function(req, res) { var url = proxiedURL +"?" + querystring.stringify(req.query); logger.info('/fileThumbnail going to url& ...

javascriptphpnode.jsexpress

Error: Trying to access the length property of an undefined or null reference in JSON formatted data fetched through Ajax

I am attempting to populate a jQuery DataTables with JSON data retrieved from a Web API ajax call, but encountering the following error: An unhandled exception occurred at line 38, column 314 in 0x800a138f - JavaScript runtime error: Unable to get proper ...

javascriptjqueryjsonajaxdatatables

Encountering issues with Node-persist on a complex Node.js application leading to missing return

I've encountered an issue with my heavy node app where I'm using node-persist to save data locally. Specifically, in a certain step of the process, I have the following code: const localdb = require('node-persist') const storage = loca ...

javascriptnode.jsasync-awaitnode-persist

Tips for creating a unique custom selector function to choose specific properties from an object

While developing a custom hook called useReduxState, I incorporated Redux's useSelector and lodash's pick module. To make it easier to understand, I have simplified my code for this question. Here is a snippet of what I came up with: interface IR ...

javascriptreactjstypescript

Detecting the failure of chrome.extension.sendRequest

Greetings Chrome Developers! I am wondering how one can determine when a chrome.extension.sendRequest call has not been successful. I attempted the following approach with no luck: chrome.extension.sendRequest({ /* message stuff here */ }, function(req){ ...

javascriptgoogle-chromegoogle-chrome-extension

Obtain the current time and date in India

I'm trying to retrieve the current time and date in Indian Standard Time, and I attempted the following code: let today = new Date(); let indianTime = today.toLocaleString("en-US", "Asia/Delhi"); It displays: "Mon Jul 26 2021 ...

javascriptnode.jsreactjs

Retrieve an item from an array using AJAX

I am working on a function using ajax that retrieves a set of values: $.each(data.dataa, function (i,item) { $.each(item, function (index, dat) { $str+=dat; }) $ulSub.append( '<li id="'+item.id +'" class="ui-widget-c ...

javascriptjqueryajax

Styling based on conditions, hovering effects, and implementing ReactJS

One issue I am facing is with an anchor element within a <div>. The anchor has conditional background styling, which seems to override the a:hover style. Whether I have conditional or fixed coloring, removing the background-style from component.js al ...

cssreactjs

iOS users may encounter a virtual keyboard obstructing HTML elements while using Safari

An editable HTML element that takes 100% of the screen's height is needed. In Safari, when an element is focused, a virtual keyboard appears and covers part of the element. Is there a way to use CSS or JavaScript to make an element take up 10 ...

htmlcssiossafariheight

Steps to set Option one as the selected value following a click event or an onClick function:

I'm having trouble getting this code to change the default option value! JS <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> function updateDefa ...

javascriptjqueryhtml

When the user scrolls to the right side of the page, fresh content will be loaded

While there are many plugins available that enable content to be loaded when the user reaches the bottom of the page, I have been unable to find a jQuery plugin that allows content to be loaded when the user reaches the right side of the document. Does an ...

javascriptjqueryajaxscroll

What is the most efficient way to transmit an HTML document element from a client to a server in Node JS

I am attempting to capture a snapshot of my client-side document object and send it to the Node.js server. However, when I try to convert it into a string using: JSON.stringify(document.documentElement) I encounter an issue where it becomes an empty obje ...

javascripthtmlnode.jsajaxhttp

The Impact of CSS Border Width on the Size of a PHP Form

Creating a PHP form with a tabbed box has been quite the challenge. With 3 tabs, each requiring different field inputs, I set out to add a border around the form headings and tabs. The border looks great, but it poses a problem - its width spans the entire ...

phphtmlcss