i am new to css.
How can i show footer at complete bottom of the page
my problem in this page : http://techdefeat.com/index.php
.technology {
min-height: 203em;
}
.foot-nav { background: #fa4b2a;}
in css this the only footer i have.
Please give some easy references, Thanks for Help.
For keep header on top when scroll and footer on bottom.
Set padding-bottom for .technology which is your main div. That should be equal to the height of your footer
JS(jQuery):
$(function(){
$(window).scroll(function(){
var headTop = $('.header-top').height();
if($(this).scrollTop()>=headTop){
$('.head-bottom').addClass('head-top');
else
$('.head-bottom').removeClass('head-top');
}
});
});
CSS:
.head-top{
position: fixed;
width: 100%;
z-index: 999;
}
.technology{
overflow:hidden;
padding-bottom: 180px; // must be same height as the footer
}
.foot-nav {
position: relative;
margin-top: -180px;
height: 180px;
clear:both;
}
For the fixed header you can give both header these styles:
CSS:
.header {
position: fixed;
width: 100%;
z-index: 1;
}
I can't see your footer at the moment?
here is my solution for header.
css
.head-bottom {
background: #fa4b2a;
position:fixed;
width:100%;
z-index:100;
}
.tech-no {
/* position: absolute; */
/ top: -33px; /
}
JS
$(window).scroll(function(e){
var $el = $('.head-bottom');
var isPositionFixed = ($el.css('position') == 'fixed');
if ($(this).scrollTop() > 200 && !isPositionFixed){
$('.head-bottom').css({'position': 'fixed', 'top': '0px'});
}
if ($(this).scrollTop() < 200 && isPositionFixed)
{
$('.head-bottom').css({'position': 'static', 'top': '0px'});
}
});
Looking for fix footer solution. thanks guys.
Related
Here I have a header with position: fixed. As it does not go with the normal flow of the window, a margin for the body is set to the height of the header (here 100px). Now, the body starts right after the bottom of the header.
The main div in the body has a margin-top of 50px. But, the header grasps that margin, and it's not shown. If I set a border on the body, then the margin is shown. I don't know what is the relation of that top margin with the border of the body.
This can be solved if I add 50px more to the margin-top of the main div. But I want to know what's happening here.
body {
background-color: white;
margin-top: 100px;
/* border: 1px solid black; */
}
header {
background-color: black;
height: 100px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
}
main {
background-color: gray;
margin-top: 50px;
width: 100%;
height: 100vh;
}
<header></header>
<main></main>
Adding a border adjusts the display of the layout because the <body> and the <main> margins overlap without the border (since it's just whitespace), but with the border rendered, the two margins must be separate. Thus, without the border, the total margin is 100px, and with the border, the total margin is 150px.
See demo below. (I've also added a button to hide the <header> since it's position is fixed, so it isn't relevant to the situation.
const body = document.querySelector("body");
const header = document.querySelector("header");
const a = document.createElement("div");
const b1 = document.createElement("button");
b1.textContent = "Toggle body border";
b1.addEventListener("click", () => {
if (body.style.border !== "1px solid red") {
body.style.border = "1px solid red";
} else {
body.style.border = "none";
}
});
const b2 = document.createElement("button");
b2.textContent = "Toggle body margin";
b2.addEventListener("click", () => {
if (body.style.marginTop !== "0px") {
body.style.marginTop = "0px";
} else {
body.style.marginTop = "100px";
}
});
const b3 = document.createElement("button");
b3.textContent = "Toggle header visibility";
b3.addEventListener("click", () => {
if (header.style.display !== "none") {
header.style.display = "none";
} else {
header.style.display = "block";
}
});
a.appendChild(b1);
a.appendChild(b2);
a.appendChild(b3);
a.style.position = "fixed";
a.style.top = "0";
a.style.zIndex = "2";
document.body.appendChild(a);
body {
background-color: white;
margin-top: 100px;
}
header {
background-color: black;
height: 100px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
}
main {
background-color: gray;
margin-top: 50px;
width: 100%;
height: 100vh;
}
<header></header>
<main></main>
I have a search bar which would like to display onto the header on scroll, a great example is like the one on this site: https://www.indiamart.com/
Approach 1 - A simple way to do this would be to detect a scroll & add and remove a class that contains display: none;
You can have an event listener -
window.addEventListener('scroll', function() {
if( window.scrollY !== 0) {
document.getElementById('searchBar').classList.add('scrolled');
} else {
document.getElementById('searchBar').classList.remove('scrolled');
}
});
With the CSS -
.noScroll
{
background: yellow;
position:fixed;
height: 50px; /*Whatever you want*/
width: 100%; /*Whatever you want*/
top:0;
left:0;
display:none;
}
/*Use this class when you want your content to be shown after some scroll*/
.scrolled
{
display: block !important;
}
.parent {
/* something to ensure that the parent container is scrollable */
height: 200vh;
}
And the html would be -
<div class="parent">
<div class ='noScroll' id='searchBar'>Content you want to show on scroll</div>
</div>
Here's a JSFiddle of the same - https://jsfiddle.net/kecnrh3g/
Approach 2 -
Another simple approach would be
<script>
let prevScrollpos = window.pageYOffset;
window.onscroll = function() {
let currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById('searchBar').style.top = '-50px';
} else {
document.getElementById('searchBar').style.top = '0';
}
prevScrollpos = currentScrollPos;
}
</script>
with the html -
<div class="parent">
<div id ='searchBar'>Content you want to show on scroll</div>
</div>
and css
#searchBar {
background: yellow;
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 100%;
display: block;
transition: top 0.3s;
}
.parent {
height: 200vh;
}
Here's a JSFiddle of the same - https://jsfiddle.net/0tkedcns/1/
From the same example, the idea is only to show/hide once user scroll the page using inline css display property, you can do the same or at least provide a code sample so we can help you!
HTML
<div class="search-bar">
<div class="sticky-search">
Sticky Search: <input type="text" value="search" />
</div>
</div>
CSS
.sticky-search {
display:none;
position:fixed;
top:0px;
left:0px;
right:0px;
background:blue;
padding:10px;
}
JS
var searchHeight = $(".search-bar").outerHeight();
var offset = $(".search-bar").offset().top;
var totalHeight = searchHeight + offset;
console.log(totalHeight);
$(window).scroll(function(){
if($(document).scrollTop() >= totalHeight) {
$('.sticky-search').show();
} else {
$('.sticky-search').hide();
}
});
I am using this for my header that changes in a one page scroll up and down page. I noticed that it's not responsive so i am asking you if you maybe know a way to make that responsive. Like changing the 0-690 into a percentage so that it will work on mobile and also on a tv screen.
HTML
<div class="header header-1" data-visible-range="0-690">Portfolio</div>
<div class="header header-2" data-visible-range="691-2100">Services</div>
<div class="header header-3" data-visible-range="2101-">Contact</div>
CSS
.header-1 {
background-color:dimgray;
display: block;
}
.header-2 {
background-color:dimgray;
}
.header-3 {
background-color:dimgray;
}
.header {
position: fixed;
top: 0;
left: 0;
height:8vmax;
width: 100%;
display: none;
visibility:hidden;
transition: visibility .4s, opacity .4s ease-in-out;opacity:0;
font-size:4vmax;padding:1.58vmax;color:white;
}
What if, instead of basing it off pixels, you just checked to see if an element hit the top of the page, and then changed the header?
We'll call these elements "triggers." See my code below for an example of how they work.
let updateHeader = () => {
let scrollTop = $(window).scrollTop(),
triggerTitle = "Hi";
$('.trigger').each((i, el) => {
let topPos = $(el).offset().top,
distance = topPos - scrollTop;
if (distance < 0)
triggerTitle = $(el).data('title');
});
$('header h2').text(triggerTitle);
}
$(window).scroll(updateHeader);
$(window).on('touchmove', updateHeader);
body {
margin: 0;
}
#container {
height: 1000px;
}
header {
width: 100%;
position: fixed;
top: 0;
background-color: red;
}
p {
margin: 200px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<header><h2>Hi</h2></header>
<p class="trigger" data-title="section1">
trigger1
</p>
<p class="trigger" data-title="section2">
trigger2
</p>
<p class="trigger" data-title="section3">
trigger3
</p>
</div>
As you scroll down the page, each trigger hits the top of the page, and the text in the header will change to the the value of the latest trigger's data-title. You could position these triggers appropriately above each of your website's sections, so that, no matter what size the screen, the header should update at the right time. Here's a codepen.
EDIT
Try this JS instead for maximum compatibility (no es6 involved).
function updateHeader() {
var scrollTop = $(window).scrollTop(),
triggerTitle = "Hi";
$('.trigger').each(function(i, el) {
var topPos = $(el).offset().top,
distance = topPos - scrollTop;
if (distance < 0)
triggerTitle = $(el).data('title');
});
$('header h2').text(triggerTitle);
}
$(window).scroll(updateHeader);
$(window).on('touchmove', updateHeader);
I need help with this website I'm making for a project at school. I need help with the Nav bar at the bottom of the window when you first load the page but if you scroll down it scrolls with the page. I need it to basically align to the bottom of the window when its first loaded. I can't for the life of me figure out how to do it. Here is a reference.
Example Website
Notice how the Nav bar is always at the bottom of the window when scrolled to the top even if you resize the window. I would like to do this with only CSS and HTML, but I understand a little bit of Javascript so if It can't be done with only CSS and HTML it's alright. Thanks for the help.
The magic is in using both JQuery and CSS.
JQuery
$(document).ready(function () {
var navBarY = $(".bottom-bar").offset().top;
$(document).scroll(function () {
if ($(window).scrollTop() >= navBarY) {
$(".bottom-bar").addClass("fixed-top");
} else {
$(".bottom-bar").removeClass("fixed-top");
}
});
});
Whenever the .bottom-bar reaches the top of the window a class fixed-top is added.
CSS
.fixed-top {
position: fixed;
margin-top: 0 !important;
}
Example
$(document).ready(function () {
var navBarY = $(".bottom-bar").offset().top;
$(document).scroll(function () {
if ($(window).scrollTop() >= navBarY) {
$(".bottom-bar").addClass("fixed-top");
} else {
$(".bottom-bar").removeClass("fixed-top");
}
});
});
body {
margin: 0px;
font-family: Helvetica, Arial;
height: 2000px;
}
.bottom-bar {
width: 100%;
height: 40px;
background: #2A2A2A;
color: white;
text-align: center;
line-height: 40px;
margin-top: calc(100vh - 40px);
}
.fixed-top {
position: fixed;
margin-top: 0 !important;
}
<nav class="bottom-bar">Navigation bar</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
How can I make my navbar stick after scrolling to a certain point on page? I don't want it to stick immediately after scrolling past it, but rather once I reach another div on the page.
Try this:
window.onscroll = function() {
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
if (scrollTop >= document.getElementById("d").offsetTop) {
document.getElementById("nav").style.position = "fixed";
document.getElementById("d").style.marginTop = "50px";
document.getElementById("nav").style.marginTop = "-50px";
} else {
document.getElementById("nav").style.position = "static";
document.getElementById("d").style.marginTop = "0px";
document.getElementById("nav").style.marginTop = "0px";
}
}
nav {
width: 100%;
height: 50px;
background: red;
z-index: 100;
}
body {
margin: 0;
min-height: 1000px
}
#d {
position: relative;
top: 100px;
width: 100%;
height: 50px;
background: yellow;
}
<body>
<nav id="nav"></nav>
<div id="d"></div>
</body>
When you scroll to the yellow div, the red navbar sticks to the top of the viewport and stays there until you scroll up