Making a div fixed at the top of the page - javascript

I have a div that I want to always move such that it is stuck to the top of the page. Let's just say that I cannot use position: fixed;
I originally used $(document).scroll(function(){}) to move the div with the scrolling. But this makes the site extremely slow after 10 seconds of scrolling.
My current solution is to use setTimeOut() to prevent multiple calls. However, this causes a delay, and the div only sticks to the top of the page once I have stopped scrolling.
Is there a way to get the continuous smooth moving of the div without killing my speed?
EDIT:
I have the following code:
<div id="outerDiv">
<div class="div">
<div class="fixed"></div>
<div class="otherDivs"></div>
</div>
<div class="div">
<div class="fixed"></div>
<div class="otherDivs"></div>
</div>
</div>
So .outerDiv has a fixed width, and there are many .div, such that outerDiv has overflow-x: scroll. If I use position: fixed on .fixed, then they will not show up properly. I want each .div to be like a column, with the heading of each column to move down

How about using two different divs. One containing the fixed content, and one containing the content which should be scrollable?
So you don't scroll within the document itself but only within the second div?
Or... use position:fixed

Related

bootstrap affix how to fix it to a parent element

I want to use bootstrap affix in a similar way to "How to Format" on the right side of Ask Question page of stackoverflow.
I can make it affix to the viewport by adding a css .affix { top: 70px } and use class='affix' data-spy='affix' in html, but what if I want the affix element to be fixed to a parent element?
For example, if I have such html:
<div class='affix-container'>
<div class='left-panel'>
some form, including a textarea
</div>
<div class='right-panel affix' data-spy='affix'>
how to format
</div>
</div>
I'd like right-panel to be affixed only relative to affix-container, so when I scroll down, if affix-container is still in viewport, then affix right-panel, otherwise let right-panel scroll up.
Can I still do this if affix-container is resizable? ie. its size/height increases with the resize of textarea it contains?
If you want to track the left-panel's scroll movement, you need to use a scroll-spy with the affix. You'll need the body tag setup first.
<body data-spy="scroll" data-target="#myScrollspy" data-offset="200">
Here the offset will ensure that tracking only starts at 200 from the top depending on header size etc. The right-panel then gets id="myScrollspy" e.g.
<div class="hidden-xs col-sm-2" id="myScrollspy">
<div class="right-panel affix" data-spy="affix" data-offset-top="400">
</div>
</div>
The fixing of the element is fixed at 400 offset (useful if you have a header etc.). You can then change the position with css as you scroll from a certain point forward. I've added things that's from my code extract and can be used/ignored i.e. on xs screens I hide my scrollspy, otherwise it takes up 2 cols in the parent row.
.affix {
top: 100px;
}
Should work with resizable container, but I didn't test it.

JQuery Issue: Sticky menu shifts to the right when it sticks

Every time that the scroll bar reaches the sticky menu it shifts the menu over a few pixels. If you scroll down slowly on my website and watch the menu you can see it.
I'm using the JQuery plugin stickUp to accomplish the sticky menu. I found that the only way I could get the menu to stick to the top without jumping to the left was by putting the "buttons" class inside of another class called "menu" and setting the width of "menu" to 100%. But that just resulted in the tiny little jump you can see now.
<body>
<div id="page1">
<div id="p1content">
<h id="Name">Travis Morenz</h>
<p>Testing & Testing</p>
</div>
<div class='menu'>
<div id='buttons'>
<div>Home</div>
<div>Projects</div>
<div>About</div>
</div>
</div>
</div>
<div id="page2">
<div class='behindmenu'></div>
</div>
I tried setting up a JFiddle to make it easier to view but the sticky menu doesn't work inside of it.
The code, however, is the same. Any help would be greatly appreciated.
In your site, when you scroll down .menu stuckMenu isStuck is getting style and got position:fixed and top:0 but you have to add left:0px then div wont move.
just add left:0px to .menu stuckMenu isStuck and it will work. Please let me know if it wont help or for more explanation.
UPDATED
When you scroll down then by jquery there is class added to .menu stuckmenu and it gives position:fixed and top:0 means fixing the div at one place so you should remove the left part too by using left:0 so it will be in center of screen.(top:0 and left:0). I will update the answer as soon as i will get more clarification.
OFFTOPIC
Your content of page 2 will hide the button but if you will hover then it will look like bugs so i have a suggestion that in .menu stuckMenu class add background:white and it will look great..hope it will help. :)
In this id #p1content you have used css which is not good..to center this column you should use margin-left:auto margin-right:auto with width:80% and you column will be responsive also. Never use fix width, its not good practise.
Concerning your question why it was moving: It received some additional style. A position left of 8px.
See screenshot.
This plugin seems to change the position from relative to fixed.
Moreover it adds top- and left-properties.
It gets moved since position gets changed to position: fixed; when you scroll down and it then ignores the margin of the body, making its own margin bigger.
CSS
body {
margin: 0;
}

Content behind Position: fixed is intractable

I have following setup:
<div class="wrapper">
<div class="element" id="first"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
...
</div>
so wrapper is set to overflow-x: auto and content that overflows it is horizontally scrollable. #first div has fixed position and more styling applied, but essentially it is always visible and other divs scroll behind it, like this:
issue here is that I'm using drag and drop functionality which works fine, but once I try to drop stuff on a fixed div and if it has content behind it, the drag and drop happens to that content. Basically feels like I'm interacting with stuff behind fixed div even though it is in front. I know fixed elements are out of the flow and maybe this is whats causing it? But I can't figure out how to make content behind that div stay behind it.
Well... It maybe because fixed elements are out of the flow.
You can try setting the element with id first as absolute and giving it a high z-index value. A high value of z-index will make it stay on top of other elements.
So when others scroll it will remain at that position.
Try plaing with ay pointer-events: none; in CSS

Prevent divs from wrapping, but do not add default scroll

Alright, so I'm a little puzzled about this: as you can see on the site for the Polymer Project, they have tabs that are horizontally scrollable if there are too many. I'd like to replicate this effect, but I can't figure out how to both prevent the <div> elements for tabs from wrapping as well as scrolling. Obviously, JS will need to be used here. Unless it's possible to get a custom scrollbar?
How can I do the above? A non-jQuery solution would be very much preferable.
Should be able to use plain JavaScript or jQuery to compare the calculated width of the inner div to the set width of the outer div. If #inner is wider than #outer, add a class to one of the divs to change how they're displayed. If not, remove the class.
The markup:
<div id="outer">
<div id="inner">
<div class="scroll-button"></div>
<!-- your tabs here -->
<div class="scroll-button"></div>
</div>
</div>
The styling:
#outer{
width:500px;
overflow-x:hidden;
}
#outer .scroll-buttons{
display:none;
}
#outer.has-scroll-buttons .scroll-button{
display:block;
}
Give the divs a fixed height and dynamic length. Where the length property of the div is made by counting the number of columns you want in a div.
Why the aversion to jquery?

Stop SKROLLR's animation on a specific artibute

Sadly, SKROLLR doesn't support position: fixed; in it's skrollr-body element. skrollr-body is the div that moves to fake scroll on mobile. The problem is that I want to do animation on a object with position: fixed;, So I thought about adding it:
<div data-0="top: 0;" data-1000000="top: 1000000px;"> [...] </div>
This will keep the div at the top of the page. The problem is that SKROLLR uses animation. I know I can add smoothScrolling=false, but I do want animation, on every change except top's changes. How can I do it?
I found the answer! All you need to do is to set data-smooth-scrolling to on or off.
In my example, what I should do is this:
<div data-0="top: 0;" data-1000000="top: 1000000px;" data-smooth-scrolling="off"> [...] </div>

Categories