Sticky position on Wordpress site - javascript

I'm trying to make a sticky element in my website that it's made in wordpress with a custom template.
I was trying everything, from css (position: sticky) should work. But in my case is not.
Can you help me with this issue?
This is the structure of the page, on the left the sticky element that I want. On the right, the content
Thank you you very much for your time.

I have checked your code.Position sticky is not working as because one of the parent div has overflow:hidden property so basically position sticky is not working with overflow hidden so please apply below property in your css file and then check
<style>
aside.widget-area.col-xs-12.col-sm-12.col-md-4.col-lg-3.order-2-sm-sidebar {
position: sticky;
top: 80px;
height: 600px;
overflow-y: scroll;
}
#widthContent {
overflow: unset !important;
}
</style>

Related

How to Stop Jumping Position fixed element on scrolling

Please anybody help spend 3 days on this but still stuck. I created a section on my site where am playing video-based scroll position to section but when you scroll to the first section or back to the last section from the bottom side video frame jumps.
actually, I don't know how I make position fixed element to top:0 inside relative container currently I have video frame position: absolute which is top:0 and correct but when I scroll am changing position:absolute to position fixed but that can't work with top:0 because fixed element can't work to the relative container so am adding top:35%
please watch the video here
https://www.loom.com/share/c29a3cadb3dc4420a59baaae072c1cec
and here is the site link
https://qa.modulos.ai/product-overview/
Okay I found your solution!
Remove everything that you have, and remove those classes not-sticky-top and sticky not-sticky-bottom
And your main problem is that body has overflow: hidden; which you must remove so that sticky can work, like this link says
Change your css like this:
body {
overflow-x: visible;
}
.sticky {
position: sticky !important;
top: 100px; // This is important so that the video doesn't go under the header, you can fine tune it afterwords
max-width: 100%;
}
.video-side {
position: relative;
}
Don't forget to remove over-flow: hidden on body and remove all those JS triggers and all other classes on the video element

Bootstrap affix() plugin having issue while scrolling the content

I'm trying to use the Bootstrap affix() plugin. I want the navbar to pin to the top of the screen when I scroll. here is what i have so far:
http://jsfiddle.net/zncud7md/2/
The issue is the content below navbar shifts (tiny bit of inch downwards) when the affix class triggers in. I even tried adding the:
#header.affix + #body { padding-top: 75px; } that i found on other sources but didnt work for me.
I'm unable to find a way around this. Any ideas how can i prevent this issue??
Thanks!!
Bootstrap affix acts like sticky positioning so that if you scroll, you can have an element stick to a fixed position (http://getbootstrap.com/javascript/#affix).
Instead, you can simplify your code by setting your header position to fixed at top:0 and pad the top of your body.
#header {
position: fixed;
top: 0;
z-index: 9999;
}
#body {
padding-top: 75px;
}
http://jsfiddle.net/zncud7md/4/

How to not allow the 'bounce' effect on the end of scrolling on a website?

Im trying to get this scrolling effect i have seen on the website http://www.unheap.com , if you scroll to the bottom or to the right you'll notice that you can't scroll past whatsoever. Most website including this one allow you to scroll past slightly with a lot of resistance but I'm trying to replicate the example above where you can't scroll past at all. Anyone know of any plugins or methods on how to go about creating this effect?
The actual website itself is 100% the width and height of the page and any scrolling that occurs is accomplished via an absolutely positioned container with overflow: scroll.
EDIT
The actual overflow is set on the .grid element, which is inside the absolutely positioned .container element.
EDIT #2
The author is also using jScrollPane, but you can prevent the bouncing effect simply by making your body 100% width and height and absolutely positioning a container that has overflow set to scroll.
EDIT #3
See the attached code snippet - (you may have to copy and paste it into it's own HTML file because of the way SO displays snippets). There is no bouncing.
* { margin:0; padding:0; }
html,
body { width: 100%; height: 100%; overflow:hidden;}
body>div { height: 50vh; overflow: auto; padding: 10px; background: #000; position: absolute; width: 100px; top: 100px; left: 100px;}
body>div>div { height: 1000px; background: #0f0;}
<div>
<div>scrollable content</div>
</div>

Fixed div disappearing on scroll left Css

I looked at many answers here on SO but none worked for me.
Below are the posts I have looked before posting this question.
jquery fixed div on scroll-down
jquery fixed div on scroll, smooth movement
jquery fixed div on scroll, bottom boundary
How to manage css left property for fixed div
fixed div position on scroll is not working in all conditions
Absolute DIV inside a relative DIV inside a fixed Div disappears on scroll
Sticking a fixed div on scrolling down
For this purpose I have created a fiddle that shows my problem :
jsfiddle demo here
My problem there is the login span disappearing on zooming (I can't see it on scroll right)
#fixedContainer
{
background-color: #ddd;
position: fixed;
width: 500px;
height: 100px;
top: 0px;
margin-left: 20px;
}
.login
{
float: right;
}
I would prefer a CSS solution but am OK with a Javascript solution too.
Add these css attributes to your #fixedContainer selector:
overflow-x: auto;
max-width: 100%;

HTML and CSS in order to fix footer content of a website

Can anyone teach me how to create a footer div which is always stay at the bottom of the website regardless of how much information is present in the middle and the most important thing here is that I'm not fixed any height property for the middle content(Please notice that is "website" not "window" because I don't want to fixed the footer that force the user always see the footer whenever they scroll up or scroll down in my website) A specific example is like Facebook that footer always at the end of the page no matter how many times you click older post button. Is there anyway possible in HTML and CSS or even javascript to do that. Please help me and thank you so much in advanced!
I've used stickyfooter in the past. You can learn it here http://ryanfait.com/sticky-footer/
You put the footer content after the other content. That's all.
(Unless you need to deal with earlier content that is positioned out of normal flow, is floating, etc).
One way is to use a master page with the footer div in it. Please take a look at this MSDN article for more info: http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx
If you want the footer to be pushed down to the bottom of the window if the content isn't high enough to fill the window, use the technique offered in this article.
To summarize the article:
Create a wrapper around the page elements:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
Using CSS, give the body 100% height and give the container position:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
Again using CSS, give the content (in this example, #body), a padding-bottom with the height of the footer and position the footer absolutely at bottom: 0:
#body {
padding-bottom: 60px; /* Height of the footer */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Height of the footer */
}
It's important that the footer has a fixed height (i.e. in px or em).
You can see a demonstration of this technique here: http://jsfiddle.net/PPvG/F7Fph/

Categories