The Div element seems to have a mind of its own, refusing

Check out my code on this link: http://jsfiddle.net/Pd7nm/

I'm trying to make the sidebar stop scrolling with the page once it reaches a certain point, but it just won't cooperate. I've attempted various solutions, but none seem to be effective.

Here's the Javascript method I'm using:

 var windw = this;
$.fn.followTo = function ( pos ) {
var $this = this,
    $window = $(windw);

$window.scroll(function(e){
    if ($window.scrollTop() > pos) {
        $this.css({
            position: 'absolute',
            top: pos
        });
    } else {
        $this.css({
            position: 'fixed',
            top: 0
        });
    }
});
};

$('#side').followTo(250);

Answer №1

Check out the latest JQuery Fiddle here

$(window).scroll(function() {
    var scrollHeight = $(window).scrollTop();
    if(scrollHeight>250){
        $(".sidebar").css({"position":"fixed","top":0});
    }
});

Answer №2

Check out these demos - I've eliminated the "br" tag

Demos: jsfiddle.net/Nu3eu/1/

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

Is the POST AJAX request being rejected due to CORS restrictions?

I have configured CORS on my node.js server running on port 5000 in the following way: var app = express(); app.use(cors()); //normal CORS app.options('*', cors()); //preflight app.post('/connect', function(req, res) { console ...

What causes bootstrap columns to wrap to a new line when in print view mode?

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body> <div class="container-fluid"> <div class="conta ...

Should all images be set to 100% width with a standard Bootstrap configuration?

For my website project, I decided to incorporate the Bootstrap carousel into the header using version 3.0.3 of Bootstrap. Everything seemed to be functioning correctly until I noticed a strange issue with the image sizes on the page. Initially, all the ima ...

Identifying the parent div in jQuery based on a specific class condition

I have a few different posts that resemble the following ("example" being the post content): <div class="example"> <p><a href="">example</a></p> <span class="thumbs-rating-up thumbs-rating-voted" onclick="thumb ...

NextJS - The server attempted to execute the find() function, which is only available on the client side

When attempting to utilize the .find method within the server component, I encounter an error. export async function TransactionList() { const transactions = await fetch('/transactions'); return ( <ul> {transactions.m ...

Endless cycle occurs when an asynchronous action is dispatched within useEffect

I encountered a never-ending loop problem when I added a dispatch function in my code within the useEffect hook. Despite looking into similar issues raised by others, I still can't seem to figure out the root cause of the problem. Here is how my compo ...

Adjust the max-height to occupy the entire available space

One of the challenges I'm facing with my web application is designing the layout in a way that all elements interact seamlessly. The structure is as follows: <body> <nav> <-- top navigation bar <ol> <-- breadc ...

jQuery draggable elements can be easily dropped onto droppable areas and sorted

I need help with arranging the words in the bottom tiles by sorting them from "Most Like Me" to "Least Like Me" droppable areas. Currently, I am able to drag and drop the words into different boxes, but it ends up stacking two draggable items on top of eac ...

Attempting to execute a code snippet using Express framework on the local server at port 3000

Having some trouble with my initial attempt at a basic application. The Scraper.js file successfully scrapes a URL and outputs the array to the document object when executed in the console. Now, I want to set up an Express server to run the script whenever ...

I am having trouble with the functionality of my bootstrap navbar toggler

Can you please review the code and help me identify the issue? The toggle button is not functioning properly, it should display the menu bar when clicked. <body> <!--navigation bar--> <nav class="navbar navbar-expand-sm navbar-dark bg-dan ...

Activate validation checks when the Div is loaded

I have a situation where I have multiple divs on my page, with only one visible at a time due to the use of an update panel. Within the third div, I need to implement validations using jQuery. <script src="http://ajax.aspnetcdn.com/ajax/jquery.valida ...

What could be causing the code to not wait for the listener to finish its execution?

I've been attempting to make sure that the listener has processed all messages before proceeding with console.log("Done") using await, but it doesn't seem to be working. What could I possibly be overlooking? const f = async (leftPaneRow ...

I'm encountering an issue with the React state where it seems to be endlessly nesting

I am new to React and I seem to be encountering an issue where every time I trigger a click event, the state object continues to nest. The code snippet below is part of the App component. const [state, setstate] = useState('') useEffect(() =& ...

Issue with ngClass not updating during Route Event

I am using a bottomNavigation component that changes its style to indicate which route we are currently on. Below is the template for the bottom-navigation: class="menu-icon" [ngClass]="{ 'active-item': buttonActivated.value == '/my-goa ...

Creating a primary php file in Apache without the use of SQL or any database: is it possible?

Forgive me if this comes across as rude, but I'm struggling to grasp the concept of apache, PHP, and servers in general. To help myself understand better, I want to create a very basic website that assigns an ephemeral ID to each user (not a session). ...

The Wordpress block template is inhibiting Bootstrap from managing responsiveness

In the process of creating a custom WordPress block theme, I encountered a styling dilemma. While I wanted to maintain WordPress styling for its built-in blocks, I aimed to have Bootstrap exclusively style the blocks created within my theme. With Bootstrap ...

Tips for altering the webpage's URL using a button

I am currently attempting to implement next and previous buttons on my calendar to navigate between months. While it would be ideal to achieve this without refreshing the page, I am open to the possibility of a page refresh if necessary. In PHP, I have a ...

JQuery Mobile applies X to all divs with the specified class

I am currently working on a JQuery mobile website with an image slider on 2 different pages. In order to activate the sliders, I am using the following JavaScript code: $(function () { $("#slider").excoloSlider(); }); where '#slider' refers ...

Querying cookies using Jquery/Ajax

Is there a way to trigger an ajax call when a page detects the presence of a cookie? I'm having trouble getting the ajax call to work in the code below. Any assistance would be greatly appreciated. EDIT: I have updated the code and it is now function ...

This API is no longer compatible with India's payment system, so you won't be able to process payments using Next.js, Strapi, or

I am currently developing a website using "next js" as the frontend and "Strapi" as the backend for a simple ecommerce project. The payment gateway being utilized is "Stripe". I have implemented the checkout code in both the frontend and backend, and every ...