Looking to have a block within the page stick when you scroll down
i.e. https://auratenewyork.com/
(Note: "Fine jewelry designed to be worthy of the women who wear it" text block sticks while the right side still scrolls)
.sticky {
position: sticky;
top: 0px;
}
This is to be a custom CSS code within squarespace. Sticky is just not working and it's wracking my brain. I've even changed the overflow to visible or auto (not hidden). Still doesn't work. Sticky does not even come up highlighted like position:fixed does.
This article goes over how position sticky works. But since you haven't provided any code yet, we can only guess what the issue might be. But please note this part from the article:
While playing with it, I quickly noticed that when an element with a position: sticky style is wrapped, and it is the only element inside the wrapper element, this element, which was defined position: sticky will not stick. [...] When I added more elements inside the wrapper element, it started working.
Hopefully this wil help you.
Related
I'm currently working on a website using Elementor. I tried integrating a Footer using a separate plugin (Elementor Footer&Header), however, the footer didn't stick to the bottom of the page if there was only little or no content.
As this seems to be a common issue, I solved the problem by adding the following code:
div.footer-width-fixer {
position: fixed;
bottom: 0;
}
Now, the footer sticks to the bottom of the page, however, there 2 other problems:
The footer overlaps with the content in the bottom of the page (see attached image)
The footer is sticky, although I didn't set it up to be so. I only want the footer to appear at the bottom of the page, not while the visitor is scrolling.
Any ideas how to solve this? Thank you!
Best Regards,
Maurice ( :
overlapping-footer
Its tough to tell if the footer is actually overlapping another sentence (I only speak english so I cant tell if the sentence ends or read it at all). But it looks like its only overlapping the padding on the button and its just snug to the text content.
You could try to add either
padding-top: {desired pixel amount}px;
or
margin-top: {desired pixel amount}px;
to the footer and see if that does the trick.
As for the position sticky, If your familiar with the inspect element feature in google chrome; you can see what the class selector is that is applying the sticky to the element and then you should be able to write a bit of css to overwrite that fairly easily!
I have had the same problem a few times but I simply fix this by setting the height of the section to either "fit to screen" or the VH to 100 - the header height (If you use a transparent header). I hope this has helped you and if you have any questions don't mind asking!
I'm working on trying to get position: sticky working for an element that is inside of another wrapper.
Here is an example codepen where it is not working (make sure the bottom area is small enough to be scrollable.)
https://codepen.io/anon/pen/aWLrXd
(Notice all dt stick, but not he one wrapped in the div class='broken' tag.)
Any thoughts on why this may be happening?
EDIT:
I've noticed that if I set the display for the wrapper to inline, it works!
I've noticed that if I set the display property for the wrapper to inline, it works!
No clue why.
This is a pretty small question, I've tried googling but without knowing the name of the style I'm getting nowhere fast. What is the design pattern called where the (i'm going to say blog cause that's where I've seen it used) blog text is a continuous scroll but the rest of page (ie headers and footers) is static?
As an example blog
By default, elements are positioned static, relative to each other (position: static;). To position an element relative to the viewport, you use:
element {
position: fixed;
}
This takes the element out of the normal text flow. See http://www.w3schools.com/css/css_positioning.asp for more information about positioning.
You are looking for
position:fixed
Now you got a fish, learn how to catch it :
You need to use your browser toolkit, or firebug for firefox, to select the element you want to inspect, then looking for it's source code and css rules, you will see by your own how it's made.
I don't think there's a specific styling terminology for it but all you need to do is add position: fixed to your header and/or footer.
#header {
position: fixed;
}
#footer {
position: fixed;
}
I want my floating sidebar to stop before it hits the footer - the only solutions I have found so far involve using javascript, but I'd prefer if there were a way to go without if possible!
a baisc example: jsfiddle example
By adding the code below, I can get it to stop, but it then pushes everything inside my sidebar way up the page:
bottom: 500px;
This is not exactly what you are looking for, because I can't think of any solutions that don't involve any JS
What you can do though - if you give the footer element a position (relative or absolute), the sidebar will slide down behind as the page scrolls.
.footer
{
width: 100%;
border: 1px solid green;
height: 500px;
background-color: green;
position:relative;
}
Ok, your problem is, you don't really understand HTML container bounding, and flow.
I would spend some time looking at HTML Flow tutorials, and understanding exactly whats happening, as it will make your life in the future much easier.
Another trick is to put borders around every containing structure such as DIV's, so that you can see how each of your objects are nested, etc...
The problem is, when you take and add bottom:500px;, you are absolutely positioning the footer, this automatically removes it from the normal HTML flow. I am guessing your right toolbar is out of flow as well.
So instead of using absolute positioning on either the footer or the right side toolbar, you will need to use a bounding outer container that encapsulates the whole page, then place each element on the page in the order you want the flow, using float:left, float:right to get your vertical positioning. As long as your footer is the last thing within your bounding container, and all elements are within the flow, and the width on the footer is set to 100%, you should get the behavior your looking for.
I'm having a problem with this page.
The .blog-footer div needs to clear on the right to correct for the height of the pictures introducing clear:right; causes the huge gap to appear on the page in FF and IE.
I'm at a loss, I've tried numerous ideas to get around the problem and at this point I've been staring at it too long to see the problem clearly. Can anyone help me out.
Thanks in advance.
Try using positioning. Add these to get you started:
#page-body {position: relative; width: 740px; margin-left: 20px;}
#sidebar {position: absolute; right:-190px;}
There are some subtleties, like getting the right behaviour when the content as a whole is not long enough to push the footer down, but I find those easier to work out than floating problems. With a fixed height footer like yours, that is easy to fix using a bottom margin on the page body and some more absolute positioning for the footer. You have gobs and gobs of extra divs to play with.
The clear attribute works relative to floating elements. So you can use it to make sure the footer closes the div below the picture, but the fact that your sidebar is floating as well actually pushes things down to the bottom of the sidebar.
So, as #Nicholas Wilson proposes, one solution is to position your sidebar using means other than float. And your layout doesn't appear to really require float for the sidebar.
In another direction, I noticed that you are currently hardcoding the heights of your pictures. Since you know these heights, another possibility is to forget about the clear:right for blog-footer , and add a min-height attribute to the asset-body, as in (this is for the beer festival)
<div class="asset-body" style="min-height:184px;">
Certainly not elegant or DRY, but if you had to you could do this or have javascript do it.