Is there a way to keep a specific side div fixed at a particular scroll level, similar to the "How to format" bar on the right side of the Stack Overflow ask question page? You can see it when you try asking a question. How can this be achieved - with CSS or jQuery?
If you're looking for a way to make a sidebar stick to the top of the page when scrolling, here is a simple example that shows you how to do it. By listening to the window onscroll event and checking the value of $(window).scrollTop(), we can determine when to add or remove the .fixed class from our sidebar element. This class will set the CSS property position: fixed, ensuring that the sidebar stays in place as the user scrolls. Feel free to view the working example on jsFiddle.
JS
$(window).scroll(function () {
var threshold = 100;
if ($(window).scrollTop() >= 100)
$('#sidebar').addClass('fixed');
else
$('#sidebar').removeClass('fixed');
});
CSS
#sidebar {
position:absolute;
width:80px;
background-color:#0F0;
height:200px;
}
#sidebar.fixed {
position:fixed;
top:0;
}
HTML
<header>
I'm the header
</header>
<div id="container">
<aside id="sidebar">
I'm a sidebar
</aside>
<section id="content">
...
</section>
</div>
$(document).ready(function(){
var scrollPos = 220;
$("#scrollable_div").scrollTop(scrollPos);
});
Ensure that your div is styled with overflow:auto
Check out this helpful tutorial: http://css-tricks.com/scrollfollow-sidebar/
Alternatively, here is some HTML code:
html
<div id="header">HEADER</div>
<div id="content">
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
</div>
<div id="footer">FOOTER</div>
And here is the corresponding JavaScript code:
$(function() {
var $sidebar = $("#right"),
$window = $(window),
rightOffset = $sidebar.offset(),
rightDelta = $("#footer").offset().top - $("#header").offset().top - $("#header").outerHeight() - $("#right").outerHeight(),
topPadding = 15;
$window.scroll(function() {
$sidebar.stop().animate({
marginTop: Math.max(Math.min($window.scrollTop() - rightOffset.top + topPadding, rightDelta), 0)
});
});
});
Here is a demo of example 2: demo
You can choose based on your needs. I hope this information helps you.
I am trying to determine if one element is positioned above another by comparing their offset positions. Specifically, I need to verify whether the me element is within the bounds of the screen element using their respective offset positions. HTML Code ...
Greetings! I am currently working with some elements that look like this: <div id="one">content</div> <div id="two">content</div> These elements are followed by another set of elements (without any parent, placed directly after th ...
Let's consider a scenario where we have an input element with the following text: <input type="text" value="Lucas"> Is there a way to emphasize the "L" in the value as Bold, similar to Lucas? We are familiar with how this can be achieved usin ...
Within this setup, there is a div containing Details and Summaries to the left. Upon expanding the details, the text enlarges and the container moves, causing the image in the right div to shift downward. Is there a way to prevent this from happening? I ...
I am facing an issue with my code where the background image of the site transitions between 5 different images, but every time an animation completes and the next one starts, there's a white flash. I'm not sure how to resolve it or what I might ...
https://i.stack.imgur.com/VATrD.png I'm looking to replicate this design using a pre-built Chip component from MaterialUI While the solution might involve Some Text using html and css, it still may not achieve an identical result. I've come acr ...
I have a form that includes dynamic text boxes fetching data from the backend. When a user clicks on a text box, the color of the text changes. Upon form submission, a confirmation message is displayed and I want the text box color to revert back to black. ...
Does anyone know of a plugin that can minify javascript or css files as they are uploaded using Dreamweaver or similar coding software? For example, if I create a file like functions-global.js, the plugin would upload the original file and also generate a ...
I'm currently working on a toggle switch that I want to make responsive for future resizing. The toggle switch includes a red square (for demonstration purposes), but I've encountered an issue where the red square stretches and changes its dimens ...
Exploring HTML as a beginner has led me to an interesting issue. I've been practicing my newfound skills on W3Schools' platform and everything was running smoothly until I encountered a discrepancy in how the code is rendered on Wordpress. The s ...
I am currently working on a project using jQuery Mobile. On one of the pages, I would like to implement the mobilescroll feature for a select element () I have tried using data-role="none", but it only works on the parent element and not the children. Ad ...
I am trying to incorporate a thumbnail image in a jQuery DataTables. A thread on Stack Overflow 1 suggests adding a js render function to the .DataTable settings. I want to implement this solution in a standard way, using Django's class-based ListVi ...
I am trying to iterate through an object that contains functions which need to execute consecutively. Ideally, I would like these functions to be chained together in a way where one function waits for the previous one to finish before executing (e.g., func ...
Recently delving into cakephp, I've been attempting to create a straightforward ajax request to dynamically modify a section of the screen. Although I've come across numerous examples online, I'm struggling to amalgamate them seamlessly! Upo ...
I am facing a challenge with my button functionality that is supposed to open a panel. However, there seems to be an interference caused by my JavaScript code. The panel contains a notifications center and in order to retrieve the notifications, I have to ...
I am sorry if this question sounds simple, but I would like to know how to set up a function that triggers when the Ajax data changes from the previous request. window.setInterval(function(){ $.get("feed", function(data){ if (data.changed ...
While creating an application on Sitefinity (ASP.NET), I encountered an issue where certain elements, such as button text and labels, were not loading correctly when running the application. However, upon inspecting the element, they appeared to be working ...
Hey there, I've got some text inside a div that's been transformed with rotate(3deg). Strangely enough, in Firefox, the text appears wavy. When I remove the transform property from the div, the waviness disappears. Is there any way for me to keep ...
Encountering a peculiar jQuery issue where triggering a click on a radio button does not fire completely and is ignored by an on click function, while a similar call to the jQuery trigger method is successfully captured. In the below jQuery snippet, a < ...
Update Issue Resolved! Special thanks to @Peter Campbell for guiding me in the right direction and assisting with most of the troubleshooting. Modified code snippet below: If String.IsNullOrEmpty(output) Then exists = False Else exist ...