Develop Reference

How to update sticky menu's CSS positioning on window resize

I've built a sticky navbar based on an example from W3 schools. It's working very well — except when I resize the window, the alignment of the nav menu to the page content is incorrect.
You'll see that I've got some code that finds the correct offset for left side of menu, by checking another element on the page. It then adds some left padding to align it properly. (Without this, the position:fixed value just sends the sticky nav to the far left of the page).
This works great on scroll! However, if the window is resized horizontally, that left padding value doesn't update.
I've tried a few iterations of $(window).resize but haven't been able to get it to work. I'm sure it's an easy line of code I'm just not figuring out. Thanks in advance!
setTimeout(function () {
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the navbar
var navbar = document.getElementById("app");
// Get the offset position of the navbar
var sticky = $("#app").offset().top
// Find correct offset for left side of menu (by checking #title element)
var element = document.getElementById('title');
var leftPos = element.getBoundingClientRect().left + window.scrollX;
var roundLeft = (Math.round(leftPos)) - 5;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
navbar.style.cssText = "padding-left:" + roundLeft + "px!important";
} else {
navbar.classList.remove("sticky");
navbar.style.cssText = "padding-left:inherit";
}
}
}, 4000);
.sticky {
position: fixed;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.99);
z-index: 9 !important;
max-width: none !important;
box-shadow: 0px 1px 10px #999;
}
(I'm using setTimeout because our Shiny app takes a few seconds to load and for the content to populate.)

You should use pure CSS solution with position: sticky
It does have acceptable percentage of browser support:
https://caniuse.com/#feat=css-sticky
Since it's just the styling, it may be fine to show it static in the old browsers.

fixed sidebar on scroll with Js

I've spent hours trying to figure out why I cant seem to get a sidebar fixed on scroll with javscript.
At this point I dont know if it's something in the js or css. I've tried to add a classList of "fixed" - didnt work.. and when I add sticky it just pushes down the main text .
The idea is for the nav bar and sidebar to be fixed once the user scrolled the entire header but the main text should be scrolled while the two other elements are fixed.
code here -> https://codepen.io/mullerz/pen/GRpKQVy```
help please and thanks a million

CSS position: sticky is the only thing that you would need. You already use it somewhere on the nav, but because of the JavaScript code it messes things up. Comment out your fixNav function and scroll event listener.
Instead use CSS to say when the nav and #sidebar elements should be sticky. The sidebar element should have a slight offset because it should sit just below the nav bar. With the top property you can set the trigger position when an element becomes sticky. Same goes for left, right and bottom.
Add the following lines to your existing nav and #sidebar styles and see what happens.
nav {
position: sticky;
top: 0;
}
#sidebar{
position:sticky;
top: 8vh; /* <-- height of the nav */
}

https://codepen.io/casa90/pen/ZEbzxZB
as css try below . I used important because your #sidebar css below it .order of css isportant.
.fixed-sidebar{
position:fixed !important;
}
as script i calculated navbar offset height andt changed padding top to top. for absolute or fixed style u should use top bottom left right . try below
const nav = document.querySelector("#main");
const navTop = nav.offsetTop;
const navHeight = nav.offsetHeight;
const main = document.querySelector(".site-wrap");
const bars = document.querySelector("#bars");
const sidebar = document.getElementById("sidebar");
window.addEventListener("scroll", fixNav )
function fixNav(){
sidebar.style.top = (nav.offsetTop+navHeight) + "px";
if(window.scrollY >= navTop){
nav.classList.add("fixed");
main.style.paddingTop = navHeight + "px";
sidebar.classList.add("fixed-sidebar");
}else{
main.style.paddingTop = 0;
nav.classList.remove("fixed");
sidebar.classList.remove("fixed-sidebar");
}
}
bars.addEventListener("click", function(){
sidebar.classList.toggle("active");
})

Freezing Table Header Without Access to HTML

Preview from the web inspector
Hi, I am trying to freeze the Table header so that when you scroll, the header remains at a fixed position.
I currently don't have access to HTML because am using a PHP Maker And I don't know how to do that.
Please, can someone assist me freezing the table header with a CSS or a javascript code?
The screenshot of the table contains the table header and tr values
Thank you.

In CSS you can use
.sticky{
position:fixed;
}
For a javascript code, you can use;
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}

You can always try to do it with CSS/Javascript. Since you can't access the html file, you'll have to add style options to existent classes or add classes with Javascript. The css could be something like this:
/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 0;
width: 100%
}
Then you'd need a script to add the sticky class to the header whenever the user scrolled. Something like this:
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the header
var header = document.getElementsByClassName("ewBox");
// Get the offset position of the navbar
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
If you don't understand anything, take a look at this example or don't hesitate to ask me.

.ewTableHeader{
position: fixed;
}
or
.ewTableHeader {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 999;
}

make div scoll untill it reaches top of page then fixed

let's get straight to the point:
My code looks like the following:
<div id="keep_up">
<div id="thread_menu">
<div id="new_thread">
</div>
</div>
</div>
And my css:
#keep_up {
position: fixed;
width: 13%;
}
#thread_menu{
height: 80vh;
width: 100%;
float: left;
position: relative;
}
Now i use this for a forum. and this is basically to show the active and new threads on the side of the screen.
However. When watching a thread, the header disappears (Wich makes sense because we are scrolling down).
but i want the thread menu to stay on my side (So that it is always visible). In this case that is happening because my keep_up div has position: fixed. But i only see half of the thread menu becuase it is too long and won't scroll up.
My question:
I want the thread menu to scroll up, untill it reaches the top of my window. From then on i want it to stay there.
How do i do this?
I saw a few examples but none of them worked for me.
EDIT: Code i tried:
<script src="jquery.min.js">
$(window).scroll(function () {
var margin = null;
$(window).on("scroll", function () {
var scrollHeight = $(document).height(),
scrollTop = $(window).scrollTop(),
offsetBottom = 110, // Offset depending on the height of the footer
offsetTop = 100, // Offset depending on the height of the header
positionTop = $(".keep_up").offset().top,
affix;
if (margin != null && (scrollTop + margin <= positionTop)) {
// The sidebar has reached the bottom and is still on the bottom
affix = false;
} else if (positionTop + $(".keep_up").height() >= scrollHeight - offsetBottom) {
// The sidebar has reached the bottom
affix = 'bottom';
} else if (scrollTop <= offsetTop) {
// The sidebar has reached the top
affix = 'top';
} else {
// The sidebar is midway
affix = false;
}
// If the sidebar hasnot changed his state, return;
if ($(".keep_up").hasClass('at' + (affix ? '-' + affix : ''))) return;
if (affix == 'bottom') {
margin = positionTop - scrollTop;
} else {
margin = null;
}
// If the related class is added to the div
$(".keep_up").removeClass('at at-top at-bottom').addClass('at' + (affix ? '-' + affix : ''))
});
});
</script>
And the CSS:
.keep_up{
/*position: fixed;*/
width: 13%;
}
.keep_up.at {
top: 1px;
position: fixed;
}
.keep_up.at-top{
}
.keep_up.at-bottom {
top: 438px;
position: absolute;
}

modify this on HTML:
<div id="prevent"></div>
<div id="keep_up" data-spy="affix" data-offset-top="200">
Add this CSS:
.affix{position: fixed !important; top:0px; z-index:999;}
.affixpatch{margin-top:100px !important;}
this will fix the div when you scroll down 200px. Change data-offset-top value to reach it on different break point.
.affixpatch is a class that will be loaded with next jquery function. it prevents to hide content behind top fixed div. Change margin-top to another value if this don't solves the "hide content" problem that always generate affixing divs.
<script>
$(function() {
//caches a jQuery object containing the header element
var header = $(".affix");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
$('#prevent').addClass("affixpatch");
} else {
$('#prevent').removeClass("affixpatch");
}
});
});
</script>
Hope it helps. If not, you may have some class that rewrite or impede the correct function of this affix.
I've tested this hundreds of times, usually to fix navbars.
SCROLL:
Using overflow to scroll content:
#keep_up{
max-height:400px;
width: auto;
overflow:auto;}
This will scroll the content inside #keep_up div (or use it in another one)
NOTE: you must declare a fixed max height for this div. Set max-width only if you need.
You can use %, em, rem... no need to be px for fix the max witdth. (to get a responsive effect, use responsive measurements)

If I understand your scenario correctly, the way to do this might be to use jQuery (or native JS, but you've tagged jQuery so I'm assuming that's in play).
There's a plugin that handles this kind of thing: http://leafo.net/sticky-kit/
I'd suggest you look at the plugin source code to see how it works - an event handler function on $(window).scroll() which then toggles classes on your #thread_menu to fix it in place. To keep your code lightweight, you probably don't need everything the plugin provides.

Sidebar jumps uncontrollably when the height is modified on scroll

I have a sidebar on my site that is fixed to the side and when the user scrolls down or up, the style attribute top is changed so that the height is adjusted.
$(window).scroll(function() {
if ($(this).scrollTop() < 125){
var v = 125 - $(this).scrollTop();
$("#sidebar").css({'top':v + 'px'});
}
if ($(this).scrollTop() >= 125)
{
$("#sidebar").css({'top':'5px'});
}
});
However, when I scroll down, the sidebar seems to jump uncontrollably and does not stick to the screen as I would like. I am using Chrome 32 so I don't see what the problem is. Please can someone help me with this issue.

Check out this fiddle.
Create a CSS class called fixed.
.fixed {
position: fixed;
top: 0px;
}
On scroll, in your JavaScript add and remove the "fixed" class accordingly to make the proper effect.
JavaScript:
$(function () {
var $sidebar = $('#sidebar');
$(window).on('scroll', function () {
if($(this).scrollTop() < 125) {
$sidebar.removeClass('fixed');
} else {
$sidebar.addClass('fixed');
}
});
});
As the header scrolls out of the window, the sidebar gets the "fixed" class and sticks to the side of the screen at the top left (0,0) respectively. When the header is coming back into view, the class is removed and the sidebar moves gracefully back to it's original position.