Div with sidebar that sticks

I am currently working on setting up a website with a sticky sidebar.

If you would like to see the page, click this link:

On a specific subpage of the site, I am attempting to make an image Validator sticky, but unfortunately, it's not functioning as expected. Here is an example code snippet that I have tried:

function fixDiv() {
    var $cache = $('#validator');
    if ($(window).scrollTop() > 100) $cache.css({
        'position': 'fixed',
            'top': '10px',
            'right': '40px'
    });
    else $cache.css({
        'position': 'absolute',
            'top': '75px',
            'right': '40px'
    });
}
$(window).scroll(fixDiv);
fixDiv();

However, my main issue lies in creating a sticky menu and so far, I haven't come up with a viable solution.

Answer №1

To improve the appearance of your '#menu' section, apply the following CSS properties:

#menu {
  position: fixed;
  top: 10px;
  left: -20px;
  width: 20%;
  float: left;
}

Consider removing the overflow:hidden styling from the body for better visibility.

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

Removing a cookie in Javascript - step by step guide

Cookie Conundrum: I've encountered a curious scenario involving browser cookies. After entering an invalid login ID, an unauthorized cookie appears on my HTML page. Despite my attempts to display and expire the cookie, it stubbornly remains persistent ...

Component cannot be shown on the screen

<template> <div v-for="corpus in getCorpora" v-bind:key="corpus.id"> <Corpus v-bind="corpus" /> </div> </template> <script> import Corpus from "../components/Corpus"; impor ...

Issue with GridLayout causing rows to be misaligned

As a newcomer to the world of CSS, I found myself in need of a grid layout for a quick project. Here's the mishmash of CSS code I came up with: body { margin: 40px; } .container { display: grid; grid-template-rows: [row1start] 20% [row2sta ...

Scroll vertically within a Xamarin Android ListView

I have been attempting to implement a vertical scroll for a list view, but I am facing an issue where all the list view items are displayed even if they exceed the phone's screen size. This is the code snippet I have been using: <LinearLayout xm ...

JQUERY InPlaceEditor allows for easy editing of text content

At the moment, I am working on implementing a plugin. http://code.google.com/p/jquery-in-place-editor/ I am facing some minor issues with it. Currently, to edit the element, you have to click on it. However, I would like to change this so that when I cl ...

Urgent concern: the require function is being utilized in a manner that prevents the static extraction of dependencies [mysterious]

After implementing the magic-sdk version 8.0.1 on my project, I encountered the following warning message: warn - ./node_modules/magic-sdk/dist/es/index.js Critical dependency: require function is used in a way in which dependencies cannot be statically e ...

Refresh the React state at regular intervals

constructor(){ super(); this.state={ numbers : [1,2,3,4,1,2,3,4,1,3,1,4,12,2,3,2] }; } componentDidMount(){setInterval(this.updateNumbers(),5000);} updateNumbers() { console.log(this.props.newData); let numbers = this.state.nu ...

What is causing my controller action to create two new records instead of just one?

My current issue involves a simple Razor view featuring a button designed to add a new record to a table within my SQL database. The button is equipped with an Ajax function that triggers a call to the controller. I've experimented with two different ...

Transmitting the Ctrl+A key combination to an element

My current testing framework is protractor, which I utilize for conducting end-to-end tests in Angular. When it comes to inputting text into an element, I typically use: element(by.model('myModel')).sendKeys('Test'); However, I am cu ...

Sorry, we encountered a snipcart issue: The public API key was not found. To fix this, please ensure that the attribute data-api-key is

I'm experiencing issues with loading Snipcart correctly. It's able to detect the API key on localhost and display the number of items in the cart, but when deployed to Netlify, it briefly shows the item count before displaying the error message: ...

After refreshing, the LocalStorage in Angular 2 seems to disappear

Something a little different here :) So, when attempting to log a user in, I am trying to store the access_token and expires in localStorage. It seems to be working "okay". However, if I refresh the page, the tokens disappear. Also, after clicking the log ...

Using the -webkit-box-reflect property along with the CSS position:absolute styling

Running on the Chrome Canary build, I have come across this HTML code snippet: <div id="debug" class="debug" >TEST</div> Additionally, here is the CSS code snippet: -webkit-box-reflect: below 0px -webkit-gradient(linear, ...

Padding for the initial element in a carousel display

I am currently working on implementing owl carousel with stage padding. My goal is to use the carousel with loop:false, and have the first item displayed without left padding, while maintaining consistent padding for both items on the left and right after ...

Activate a button with jQuery when a key is pressed

Currently, I have two buttons set up with jQuery: $('#prev').click(function() { // code for previous button }); $('#next').click(function() { // code for next button }); My goal now is to implement a .keypress() handler on the ...

Can a JavaScript framework be created to ensure all browsers adhere to standards?

As someone who isn't an expert in JavaScript, I wonder if it's feasible to create a comprehensive embeddable JavaScript file that ensures all browsers adhere to standards. Could there be a compilation of known JavaScript hacks that compel each br ...

How can I retrieve Feature Information exclusively from the currently visible WMS layers in OpenLayers 3?

I am working with an Openlayers map that features multiple WMS layers. I am trying to use the "getGetFeatureInfoUrl" function to request feature information, but only for the layers that are currently visible on the map. Additionally, if there are multiple ...

What is the mechanism behind declaring a function using square brackets in Node.js/Javascript?

Encountering something new while working with Node.js - a unique way of declaring functions. You can find an example at this link. 'use strict'; const Actions = { ONE: 'one', TWO: 'two', THREE: 'three' }; clas ...

Implement code to execute exclusively on the initial success of react-query

I have a unique scenario where I need to utilize standard useQuery behavior, while also executing a piece of code only on the initial onSuccess event. Although I understand that I can accomplish this using useRef, I am curious if there is an alternative a ...

Why isn't the transparency feature in graphicsmagick working?

Currently, I am utilizing the graphicsmagick npm package which can be found at https://www.npmjs.com/package/gm. In my attempt to write a piece of code similar to the one below, I am struggling to make it function properly with stream. The image file myimg ...

Vue for Number Crunching

Learning vueJS is quite new to me. I am attempting to capture two input values, add them together, and display the result. I have encountered a strange issue where when subtracting number1 from number3, multiplying number1 with number2, or dividing number ...