Is it possible to obtain the position: sticky effect on an HTML table build up using just divs and css?
Apparently if I try to add the position: sticky rule to the header, which already contains the display: table-header-group rule, the sticky effects is null.
HTML
<div class="container">
<div class="header-row">
<div class="header>Header</div>
[...]
</div>
<div class="body-row">
<div class="body>Content</div>
[...]
</div>
</div>
CSS
.container {
display: table;
}
.header-row {
display: table-header-group;
position: sticky;
top: 0;
}
.body-row {
display: table-row;
}
.body, .header {
display: table-cell;
}
Live fiddle: https://jsfiddle.net/Lc0rE/9fxobxb0/1/
This question may be a few years old, but I came across the same issue. Especially now that position: sticky is a widely adopted positioning element now.
I got round this by adding a float to the Table header & Table Rows.
.header-row {
display: table-header-group;
position: sticky;
top: 0;
float: left;
}
.body-row {
display: table-row;
float: left;
}
https://jsfiddle.net/58zes8rr/
There may be a cleaner option for this using Flexbox (Arguably not widely supported yet).
I first tried the answer above and added float to my css definition however this blew away all my dynamic column widths and required i specify fixed widths for all columns. Not an option.
As with everyone else, my first instinct was to put sticky on the Row itself but that did not work. It worked PERFECTLY when i added sticky to each cell in the header row.
Fiddle Example
(TLDR)
ON EACH CELL OF YOUR HEADER ROW:
.td.searchResultHeader {
position:sticky;
top:0;
}
Related
I currently have my header sticky but of some reason it has an opacity. I want it to be relative and sticky but I can't assign both to the header.
This is what I have:
.header {
height: 80px;
padding: 0px;
background-color: #007eb6;
position: sticky;
top: 0;
}
Use the z-index property to stack your div on top of everything with the position: sticky,
if you mean that you want your header to scroll down with you when you're scrolling, then you're looking for position: fixed.
And for the opacity part, it's most likely your header is inside a div which has the opacity property, so check that as well or get your header div out of it.
Hope this helps.
.header {
height: 80px;
padding: 0px;
background-color: #007eb6;
z-index: 99;
position: sticky;
top: 0;
}
<div class="header"> header here</div>
<div>here's another content</div>
It's hard to understand what you want to achieve, so I apologize if this isn't quite what you hope to find.
I tried this:
https://playcode.io/1038441
Here, you see 'Moo' has your styling, and it isn't transparent or translucent. So, I suspect you have another style that's introducing that. You might check to see what your element has inherited, or you might explicitly set your .header to have an opacity of 1 (.header{ opacity: 1;})
As you scroll the blathering text, it scrolls under the 'Moo' header, which is what sticky does.
It can be 'relative' in the sense that you could give a 'top' of 10px, and it will be offset from the top by 10px, but still 'sticking' to the location.
I am using Vuetify and Electron to make an app to help me with certain tasks at my job. I have disable the browserWindow frame and made my header the draggable area with a button to close the window. I am using the electron vuetify template
vue init vuetifyjs/electron
My problem is the scrollbar reaches all the way to the top but I would like it below my fixed header.
I have tried playing with overflow properties on the html, body, app div, and content div tags but i have not been successful.
How would I accomplish this?
This is purely a CSS question really as you can see this behaviour in the browser too with similar layouts. The easiest way to fix this is using a flex layout:
HTML:
<div class="container">
<div class="titlebar"></div>
<div class="content">
<h1>So much content we scroll</h1>
<h1>So much content we scroll</h1>
<!-- etc -->
</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.titlebar {
background-color: blue;
height: 35px;
flex-shrink: 0;
}
.content {
flex-grow: 1;
overflow-x: auto;
}
Check out this out in this CodePen
I'd like to offer a Vuetify specific answer for this question, this should apply whether or not Electron is involved.
Vuetify's default styles make this a bit more difficult than a simple CSS solution can give you, especially when the layout gets more complex.
For this example I'm using the complex layout from Vuetify's pre-defined themes here
Vuetify ships with an overflow-y: scroll on the html element so the first step is adding an override for this.
html {
overflow: hidden;
}
This will get rid of the bar on the right side that spans the whole height of the app.
Next you will want to set your v-content area as the scrollable area. There are a few gotchas to watch out for when you're setting this area:
Display flex is already declared
Vuetify sets padding in the style attribute so you'll need to override depending on your case
You'll need a margin the height of your header(only matters if you're changing header height from 64px)
You'll need to remove the header height from the height of the content container using calc(Same as above)
If you have a nav drawer on the right side you'll need to bind a class to take care of this.
My CSS for v-content looks like this, you will need an important to override the padding since it is set by Vuetify through style binding:
main.v-content {
width: 100vw;
height: calc(100vh - 64px);
flex-direction: column;
overflow: scroll;
margin-top: 64px;
padding-top: 0 !important;
}
I also have a class bound to the state of the temporary right drawer on the v-content tag in the template, this makes sure that the scroll bar doesn't disappear underneath the right nav drawer when it's open:
<v-content :class="{ draweropen: drawerRight }">
And the CSS for that bound class, once again you'll need an important to remove the default right padding Vuetify puts on v-content when the drawer is open:
.draweropen {
width: calc(100vw - 300px) !important;
padding-right: 0 !important;
}
You can optionally set the flex-direction to column-reverse if your content is bottom loaded like a chat which is what I'm doing in this CodePen Example
I built a little component that wraps the v-main and moves the scrollbar to the main container instead of the default (the entire html).
Simply replace v-main with this and you're done.
<template>
<v-main class="my-main">
<div class="my-main__scroll-container">
<slot />
</div>
</v-main>
</template>
<script>
export default {
mounted: function() {
let elHtml = document.getElementsByTagName('html')[0]
elHtml.style.overflowY = 'hidden'
},
destroyed: function() {
let elHtml = document.getElementsByTagName('html')[0]
elHtml.style.overflowY = null
},
}
</script>
<style>
.my-main
height: 100vh
.my-main__scroll-container
height: 100%
overflow: auto
</style>
Is this a bug in WebKit/Blink?
I'm trying to implement an article summary page similar to that of a newspaper: article summaries flow down and 'wrap' from left to right, exactly as specified in the flex-direction and flex-wrap sections of the W3 specification. The remaining space in a column should be redistributed evenly between the blocks that occupy it (just like flex-grow: 1).
See the JSFiddle.
Firefox appears to have implemented this correctly, but I get a very strange layout from Chrome and Safari.
If this is indeed a bug, is there a workaround?
Firefox:
Chrome/Safari:
If you change max-height: 24rem to height: 24rem; then it works in Chrome.
It looks like Chrome is calculating the height based on the smallest block.
body {
background: #C6C2B6;
}
section {
background: white;
display: flex;
flex-flow: column wrap;
align-content: flex-start;
height: 24rem;
}
article {
background: #48929B;
flex: 1 0 auto;
min-height: 10rem;
width: 4rem;
margin: 0.5rem;
}
.big {
min-height: 14rem;
}
<section>
<article></article>
<article></article>
<article class="big"></article>
<article></article>
</section>
I have a client that wants a header like on this site http://www.solewood.com/
I have found a few questions here but they are geared only for a certain element of the header. Here is the site I am working on http://treestyle.com/ The password is vewghu
They are both shopify sites. Any help would be greatly appreciated.
If you inspect the solewoood website you can get an idea of how they've implemented the header.
When the page is at the top, there is this CSS for the header div:
<div class="header">
.header {
position: fixed;
transition: all 500ms ease 0s;
width: 100%;
z-index: 1000;
}
And when you scroll down, the .header_bar CSS class is added to the div as well:
<div class="header header_bar">
.header_bar {
background-color: #FFFFFF;
border-bottom: 1px solid #E5E5E5;
}
.header {
position: fixed;
transition: all 500ms ease 0s;
width: 100%;
z-index: 1000;
}
There are a few other things that are also changed when the user scrolls down from the top (logo, text colour, etc.), but you get the idea.
If you are unsure how to detect if the user is at the top of the page, see here.
EDIT:
In response to your comment, try using jQuery's .toggleClass() with 2 parameters.
For example:
$(window).scroll(function(e){
$el = $('.header');
$el.toggleClass('header_bar', $(this).scrollTop() > 0);
});
This shows it quite nicely: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_shrink_header_scroll
I used this technique to turn the background-color to white on scroll, then back to transparent when back at top.
And if you wanted to completely swap out headers. You could duplicate the headers, then use this to turn display on and off for those.
I want to create a sticky header bar for a website just like the sticky header on this website (http://www.fizzysoftware.com/) if any on can can help me out with coding or any resource that helps me to create the same. Your reply would be of great help to me.
In your CSS, add
position: fixed;
to your header element. It's just that simple, really.
And next time, try to use right click on something you see on website and choose "Inspect element". I think that every modern browser has it now. Very useful function.
If you want to make it sticky when it's scroll down to a certain point then you can use this function:
$window = $(window);
$window.scroll(function() {
$scroll_position = $window.scrollTop();
if ($scroll_position > 300) { // if body is scrolled down by 300 pixels
$('.your-header').addClass('sticky');
// to get rid of jerk
header_height = $('.your-header').innerHeight();
$('body').css('padding-top' , header_height);
} else {
$('body').css('padding-top' , '0');
$('.your-header').removeClass('sticky');
}
});
And sticky class:
.sticky {
position: fixed;
z-index: 9999;
width: 100%;
}
You can use this plugin and it has some useful options
jQuery Sticky Header
CSS already gives you the answer. Try this out
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
now add the class sticky to any menu sidebar or anything you want to stick to the top and it will automatically calculate the margin and stick to the top. Cheers.
If you want simplicity in a HTML and CSS option to create a Stiky NavBar you can use the following:
Just create a navbar like this one:
<nav class="zone blue sticky">
<ul class="main-nav">
<li>About</li>
<li>Products</li>
<li>Our Team</li>
<li class="push">Contact</li>
</ul>
</nav>
Remember to add the classes in this case I created a Zone (to separate my HTML in specific areas I want my CSS to be applied) blue (just a color for the nav) and sticky which is the one that gonna carry our sticky function. You can work on other attributes you want to add is up to you.
On the CSS add the following to create the sticky; first I am gonna start with the zone tag
.zone {
/*padding:30px 50px;*/
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
now with the sticky tag
.sticky {
position: fixed;
top: 0;
width: 100%;
}
Position fixed meaning it will always be in the same position; and with top 0 I will always be at the top and a 100% width so it covers the whole screen.
And now the color to make our navbar blue
.blue {
background: #7abcff;
You can use this example to create a sticky navbar of yours and play around with the CSS properties to customize it to your liking.
Try This
Add this style to the corresponding
style="position: fixed; width: -webkit-fill-available"
OR
<style>
.className{
position: fixed;
width: -webkit-fill-available;
}
</style>