Fixed Page Header
If I understand your problem correctly, you want to add the following CSS to your header to make it stay at the top of the page:
top: 0px;
Then, with div#content, give it a top margin to push it down out of the header's way:
margin-top: 200px;
So your CSS ends up looking like this:
header {
border: 2px solid red;
position: fixed;
width: 100%;
top: 0px;
}
#content {
border: 2px solid black;
margin-top: 200px;
}
Table Header Fixed beneath Fixed Page Header
This fixs the header problem with scrolling the header.
(function($) { $.fn.fixMe = function() { return this.each(function() { var $this = $(this), $t_fixed, $table_wrap, $table_header_wrap, $container, $header_height = $('header').height();
function init() { $container = $this.parent(); $table_header_wrap = $('<div>').addClass('table_header_wrap').insertAfter($this); $table_wrap = $('<div>').addClass('table_wrap').insertAfter($table_header_wrap).append($this); $t_fixed = $this.clone().find("tbody").remove().end().hide().appendTo($table_header_wrap); $table_header_wrap.css({ top: $header_height + "px" }).on('scroll', header_wrap_scroll); resizeFixed(); }
function resizeFixed() { $table_header_wrap.width($container.width() + 10); //$table_wrap.width($container.width()); $t_fixed.width($this.width() + 2); $t_fixed.find("th").each(function(index) { $(this).css("width", $this.find("th").eq(index).outerWidth() + "px"); }); }
function scrollFixed() { var offset = $(this).scrollTop(), tableOffsetTop = $this.offset().top, tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height(); if (offset + $header_height < tableOffsetTop || offset + $header_height > tableOffsetBottom) $t_fixed.hide(); else if (offset + $header_height >= tableOffsetTop && offset + $header_height <= tableOffsetBottom && $t_fixed.is(":hidden")) $t_fixed.show(); }
function header_wrap_scroll() { $table_wrap.scrollLeft($table_header_wrap.scrollLeft()); } $(window).resize(resizeFixed); $(window).scroll(scrollFixed); init(); }); };})(jQuery);
$(document).ready(function() { $("table").fixMe(); $(".up").click(function() { $('html, body').animate({ scrollTop: 0 }, 2000); });});h1,h2 { text-align: center; text-transform: uppercase;}
.container { width: 90%; margin: auto;}
table { border-collapse: collapse; width: 100%;}
.blue { border: 2px solid #1ABC9C;}
.blue thead { background: #1ABC9C;}
.purple { border: 2px solid #9B59B6;}
.purple thead { background: #9B59B6;}
thead { color: white;}
th,td { text-align: center; padding: 5px 0; white-space: nowrap; /* MUST KEEP */}
tbody tr:nth-child(even) { background: #ECF0F1;}
tbody tr:hover { background: #BDC3C7; color: #FFFFFF;}
.table_wrap { overflow-x: hidden;}
.table_header_wrap { position: fixed; overflow-x: auto;}
.scrollMore { margin-top: 10px;}
.up { cursor: pointer;}
.header { font: 13px Arial, Helvetica, sans-serif; position: fixed; top: 0; width: 100%; z-index: 1000; height: 140px; border: 1px solid #000;}
#pure { margin-top: 200px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><header class="header">Fixed Header - 140PX</header><div id="pure"> <h1>Table Fixed Header</h1> <h2>At Bottom of Fixed Header</h2> <h2>↓ SCROLL ↓</h2> <div class="container">
<table class="blue"> <thead> <tr> <th>Colonne 1</th> <th>Colonne 2</th> <th>Colonne 3</th> </tr> </thead> <tbody> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non asdf asdf asdfsad fsdf asdf sadfsad sdf adf sad sadfasd fsf</td> <td>Mais Non asdf asdf asdfsad fsdf asdf sadfsad sdf adf sad sadfasd fsf</td> <td>Allo Non asdf asdf asdfsad fsdf asdf sadfsad sdf adf sad sadfasd fsf</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> </tbody> </table> </div>
<h2 class="scrollMore">↓ SCROLL MORE ↓</h2>
<div class="container"> <table class="purple"> <thead> <tr> <th>Colonne 1</th> <th>Colonne 2</th> <th>Colonne 3</th> </tr> </thead> <tbody> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> </tbody> </table> </div>
<h2 class="up scrollMore">↑ UP ↑</h2>
</div>How do you make a fixed header with content underneath properly?
body {
margin: 0px;
}
header {
position: fixed;
top: 0;
display: table;
width: 100%;
height: 64px;
padding: 10px;
box-sizing: border-box;
box-shadow: 0 2px 6px 0 rgba(0,0,0,.12), inset 0 -1px 0 0 #dadce0;
z-index: 1;
background-color: white;
}
.logo-text {
height: min-content;
float: left;
line-height: 44px;
margin-left: 10px;
font-size: 26px;
font-family: Arial,Helvetica,sans-serif;
}
.create-account {
float: right;
height: 100%;
border: none;
background-color: dodgerblue;
color: white;
padding: 0 15px;
font-size: 16px;
font-weight: 500;
transition: background-color 0.15s linear;
}
.create-account:hover {
transition: background-color 0.15s linear;
background-color: darkblue;
}
.create-account:focus {
outline: none;
}
.sign-in {
color: #666;
float: right;
border: none;
line-height: 24px;
height: 100%;
vertical-align: middle;
font-size: 16px;
margin: 0 20px;
padding: 10px 10px;
box-sizing: border-box;
}
.sign-in:hover {
color: #111;
}
#block1 {
background-color: #ddd;
margin: 64px 0 0 0;
height: 500px;
}
#block2 {
background-color: #fff;
height: 1000px;
}<header>
<div class="logo-text">Cloudnotes</div>
<button class="create-account">Create an Account</button>
<a class="sign-in">Sign in</a>
</header>
<div id="block1">
</div>
<div id="block2">
</div>
</body>how to make a header fixed while content is scrolled
You can place the content part of the page (which is now a VerticalLayout) into a sap.m.ScrollContainer, which provides scrolling capabilities to its content. With this, you can scroll the content inside the container. You can set a custom height to the scroll container.
Have you tried to implement an sap.m.IconTabBar control instead of creating HTML elements in the XML view?
Fixed header of slider
Add these properties to your button and remove overflow: hidden from your .slider-container
.slider-item button {
position: sticky;
top: 10px;
}
Related Topics
How to Change Background Image Based on Screen Size, Possibly with Bootstrap
Nested Flexbox with Scrolling Area
Progressive Jpg Background Image Trouble in Firefox
Can One Pixelate Images with an Svg Filter
What Is the Rule Behind "CSS 256 Classes Override One Id"
Why Doesn't This Radial-Gradient Complete the Circle
Css: How to Vertically and Horizontally Align an Image
How to Create a Style Element and Append to Head in React
Crop an Image to Square Using Percentages and Max Widths
Primefaces Components CSS Customization
How to Make Diagonal Circle Border Gradient
What's the Trick to Inspect Popout/Dropdown Menu Style with Firebug
Viewport for Ie10 & 11 Desktop, But Not Mobile
CSS with If/Then Browser Logic