Develop Reference

CSS Position Sticky Is Not Working For All Divs

I'm working on one of mine project and for that I want to make the Search Bar sticky for that I've written a JS code but the problem is that the Search Bar is appear to be sticky on the "Context Section" only, It's not sticking/ working on "Sidebar & Footer". I want to make it sticky for complete body after the OffSet.
I have also tried the "position: fixed;" instead of "position: sticky;" and It's working fine in fixed position but in fixed position the Search Bar goes outside the body (Even with "overflow: hidden;" not working) that's why I'm using the sticky position.
How can I fix this issue?
const searchBAR = document.querySelector('.search-bar');
let navTop = searchBAR.offsetTop;
function stickySearchBar() {
if (window.scrollY >= navTop) {
searchBAR.classList.add('fixed');
} else {
searchBAR.classList.remove('fixed');
}
}
window.addEventListener('scroll', stickySearchBar);
.search-bar {
width: 100%;
position: relative;
display: flex;
}
.search-term {
width: 100%;
max-height: 36px;
border: 3px solid black;
border-right: none;
padding: 5px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
}
.search-term:focus {
color: black;
}
.search-btn {
width: 40px;
height: 36px;
border: 1px solid black;
background: black;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.fixed {
position: sticky;
top: 0;
}
main .content-section,
main .sidebar-section {
background-color: skyblue;
padding: 15px;
height: auto;
}
.main-section {
margin: 0 auto;
display: grid;
grid-gap: 0px;
grid-template-columns: 70% 30%;
}
#media (max-width: 600px) {
.main-section {
grid-template-columns: 100%;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="main" style="width: 400px;">
<header style="width: 100%; height:200px; background-color: skyblue;">
HEADER SECTION
</header>
<div class="main-section">
<div class="content-section">
<div class="search-bar">
<input type="text" class="search-term" placeholder="Search Here...">
<button type="submit" class="search-btn">
<i class="fa fa-search"></i>
</button>
</div>
<div style="width: 100%; height: 1000px; background-color: pink;">
CONTENT SECTION
</div>
</div>
<div class="sidebar-section">
<div style="width: 100%; height:1000px; background-color: yellow;">
SIDE-BAR SECTION
</div>
</div>
</div>
<footer style="width: 100%; height:200px; background-color: blue;">
FOOTER SECTION
</footer>
</div>

you can put the search-bar in the outermost div so that it can include the header and footer
const searchBAR = document.querySelector('.search-bar');
let navTop = searchBAR.offsetTop;
function stickySearchBar() {
if (window.scrollY >= navTop) {
searchBAR.classList.add('fixed');
} else {
searchBAR.classList.remove('fixed');
}
}
window.addEventListener('scroll', stickySearchBar);
.search-bar {
width: 100%;
position: relative;
display: flex;
}
.search-term {
width: 100%;
max-height: 36px;
border: 3px solid black;
border-right: none;
padding: 5px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
}
.search-term:focus {
color: black;
}
.search-btn {
width: 40px;
height: 36px;
border: 1px solid black;
background: black;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.fixed {
position: sticky;
top: 0;
}
main .content-section,
main .sidebar-section {
background-color: skyblue;
padding: 15px;
height: auto;
}
.main-section {
margin: 0 auto;
display: grid;
grid-gap: 0px;
grid-template-columns: 70% 30%;
}
#media (max-width: 600px) {
.main-section {
grid-template-columns: 100%;
}
}
<div class="main" style="width: 400px;">
<div class="search-bar">
<input type="text" class="search-term" placeholder="Search Here...">
<button type="submit" class="search-btn">
<i class="fa fa-search"></i>
</button>
</div>
<header style="width: 100%; height:200px; background-color: skyblue;">
HEADER SECTION
</header>
<div class="main-section">
<div class="content-section">
<!-- <div class="search-bar">
<input type="text" class="search-term" placeholder="Search Here...">
<button type="submit" class="search-btn">
<i class="fa fa-search"></i>
</button>
</div> -->
<div style="width: 100%; height: 1000px; background-color: pink;">
CONTENT SECTION
</div>
</div>
<div class="sidebar-section">
<div style="width: 100%; height:1000px; background-color: yellow;">
SIDE-BAR SECTION
</div>
</div>
</div>
<footer style="width: 100%; height:200px; background-color: blue;">
FOOTER SECTION
</footer>
</div>

Hide scroll and implement it with JS

I'm a beginner to HTML and JavaScript.
I'm building a tabs bar, in which I want to have the option to scroll it horizontally, not with a traditional browser scroll, but with arrow buttons that I've created.
Here is how my tabs bar looks like:
This is the best I've managed to do:
function clickLeft(){
arrowLeft.style.color="white";
setTimeout(function(){
arrowLeft.style.color="black";
},420);
}
function clickRight(){
arrowRight.style.color="white";
setTimeout(function(){
arrowRight.style.color="black";
},420);
}
#outer_container{
margin: auto;
}
#tabs_container{
display: flex;
overflow-x: auto;
left: 0;
right: 0;
margin: auto;
margin-top: 10px;
width: 60vh;
height: 70px;
border: 2px solid black;
border-bottom: 0;
border-radius: 10px;
padding: 4px;
}
#inner_wrap{
display: flex;
border-bottom: 2px solid black;
height: 50px;
}
#inner_wrap div{
text-align: center;
background-color: gray;
padding: 10px;
height: 20px;
border-radius: 5px;
margin: 2px;
width: max-content;
}
#tabs_container::-webkit-scrollbar{
width: 0;
}
#tabs_container::-webkit-scrollbar-track {
margin-top: 20px;
width: 20px;
padding: 20px;
-webkit-box-shadow:
inset 0 0 30px rgba(0, 0, 0, 0);
border-radius: 10px;
background-color: transparent;
}
#tabs_container::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .3);
background-color: #666666;
}
#icon_tab{
display: inline-block;
background-color: none;
border:0;
color:white;
float: right;
width: 20px;
margin:5px;
}
.arrow{
font-size: 34px;
margin: 15px;
transition: color 0.4s;
}
<div id="main_container">
<table id=outer_container>
<tr>
<td>
<div>
<i class="arrow fas fa-arrow-circle-left" onclick="clickLeft()"></i>
</div>
</td>()
<td>
<div id="tabs_container">
<div id=inner_wrap>
<div>
geisha ch 1
</div>
<div>
geisha ch 2
</div>
<div>
geisha ch 3
</div>
<div>
work
</div>
<div>
hobby
</div>
<div>
music
</div>
<div>
movie
</div>
<div>
book1
</div>
<div>
book2
</div>
<div>
game
</div>
</div>
<div id=icon_tab>
<i class=" fa fa-plus-circle "aria-hidden="true"></i>
</div>
</div>
</td>
<td>
<div>
<i class="arrow fas fa-arrow-circle-right" onclick="clickRight()"></i>
</div>
</td>
</tr>
</table>
</div>
I manage to go to the JavaScript function, but have no idea how to scroll horizontally by JS code. Also I would like to hide the OOTB scroll.
I've also created a fiddle: https://jsfiddle.net/b40c19h6/1/

Use overflow-x: hidden to hide the scrollbar and you can use the scrollLeft or scrollBy function on your tabs element to move the content.
Here how you can do it:
const arrowLeft = document.getElementsByClassName('arrow')[0];
const arrowRight = document.getElementsByClassName('arrow')[1];
const tabs = document.getElementById('tabs_container');
console.log("here")
function clickLeft(){
arrowLeft.style.color="white";
setTimeout(function(){
arrowLeft.style.color="black";
},420);
tabs.scrollLeft -= 30;
}
function clickRight(){
arrowRight.style.color="white";
setTimeout(function(){
arrowRight.style.color="black";
},420);
tabs.scrollLeft += 30;
}
body{
height:100vh;
width:100%;
margin: 0;
}
#main_container{
background-color: #3f51b5;
height:100%;
}
#outer_container{
margin: auto;
}
#tabs_container{
display: flex;
overflow-x: auto;
left: 0;
right: 0;
margin: auto;
margin-top: 10px;
width: 60vh;
height: 70px;
border: 2px solid black;
border-bottom: 0;
border-radius: 10px;
padding: 4px;
}
#inner_wrap{
display: flex;
border-bottom: 2px solid black;
height: 50px;
}
#inner_wrap div{
text-align: center;
background-color: gray;
padding: 10px;
height: 20px;
border-radius: 5px;
margin: 2px;
width: max-content;
}
#tabs_container{
overflow-x: hidden;
}
#tabs_container::-webkit-scrollbar{
width: 0;
}
#tabs_container::-webkit-scrollbar-track {
margin-top: 20px;
width: 20px;
padding: 20px;
-webkit-box-shadow:
inset 0 0 30px rgba(0, 0, 0, 0);
border-radius: 10px;
background-color: transparent;
}
#tabs_container::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .3);
background-color: #666666;
}
#icon_tab{
display: inline-block;
background-color: none;
border:0;
color:white;
float: right;
width: 20px;
margin:5px;
}
.arrow{
font-size: 34px;
margin: 15px;
transition: color 0.4s;
}
<!DOCTYPE html>
<html>
<head>
<title>vacabulary</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">
</head>
<body>
<div id="main_container">
<table id=outer_container>
<tr>
<td>
<div>
<i class="arrow fas fa-arrow-circle-left" onclick="clickLeft()"></i>
</div>
</td>()
<td>
<div id="tabs_container">
<div id=inner_wrap>
<div>
geisha ch 1
</div>
<div>
geisha ch 2
</div>
<div>
geisha ch 3
</div>
<div>
work
</div>
<div>
hobby
</div>
<div>
music
</div>
<div>
movie
</div>
<div>
book1
</div>
<div>
book2
</div>
<div>
game
</div>
</div>
<div id=icon_tab>
<i class=" fa fa-plus-circle "aria-hidden="true"></i>
</div>
</div>
</td>
<td>
<div>
<i class="arrow fas fa-arrow-circle-right" onclick="clickRight()"></i>
</div>
</td>
</tr>
</table>
</div>
<script src="main.js"></script>
</body>
</html>

This should work by using element.scrollBy.
The scrollBy() method of the Element interface scrolls an element by the given amount.
Also, you should set overflow-x to hidden instead of auto. overflow:auto will assign scrollbar to it
The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.
function clickLeft(){
arrowLeft.style.color="white";
setTimeout(function(){
arrowLeft.style.color="black";
},420);
}
function clickRight(){
arrowRight.style.color="white";
setTimeout(function(){
arrowRight.style.color="black";
},420);
}
let left = document.querySelector('#left')
let right = document.querySelector('#right')
left.addEventListener('click',function(){
document.querySelector('#tabs_container').scrollBy(-20,0);
});
right.addEventListener('click',function(){
document.querySelector('#tabs_container').scrollBy(20,0);
});
#outer_container{
margin: auto;
}
#tabs_container{
display: flex;
overflow-x: hidden;
left: 0;
right: 0;
margin: auto;
margin-top: 10px;
width: 60vh;
height: 70px;
border: 2px solid black;
border-bottom: 0;
border-radius: 10px;
padding: 4px;
}
#inner_wrap{
display: flex;
border-bottom: 2px solid black;
height: 50px;
}
#inner_wrap div{
text-align: center;
background-color: gray;
padding: 10px;
height: 20px;
border-radius: 5px;
margin: 2px;
width: max-content;
}
#tabs_container::-webkit-scrollbar{
width: 0;
}
#tabs_container::-webkit-scrollbar-track {
margin-top: 20px;
width: 20px;
padding: 20px;
-webkit-box-shadow:
inset 0 0 30px rgba(0, 0, 0, 0);
border-radius: 10px;
background-color: transparent;
}
#tabs_container::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .3);
background-color: #666666;
}
#icon_tab{
display: inline-block;
background-color: none;
border:0;
color:white;
float: right;
width: 20px;
margin:5px;
}
.arrow{
font-size: 34px;
margin: 15px;
transition: color 0.4s;
}
<div id="main_container">
<table id=outer_container>
<tr>
<td>
<div>
<i class="arrow fas fa-arrow-circle-left" onclick="clickLeft()"></i>
</div>
</td>()
<td>
<div id="tabs_container">
<div id=inner_wrap>
<div>
geisha ch 1
</div>
<div>
geisha ch 2
</div>
<div>
geisha ch 3
</div>
<div>
work
</div>
<div>
hobby
</div>
<div>
music
</div>
<div>
movie
</div>
<div>
book1
</div>
<div>
book2
</div>
<div>
game
</div>
</div>
<div id=icon_tab>
<i class=" fa fa-plus-circle "aria-hidden="true"></i>
</div>
</div>
</td>
<td>
<div>
<button id='left'>Left </button>
<button id='right'>Right</button>
<i class="arrow fas fa-arrow-circle-right" onclick="clickRight()"></i>
</div>
</td>
</tr>
</table>
</div>

Scrollable part of page

I want to have a similar effect like on this page: https://melaniedaveid.com/ (half of the page is scrollable).
I can make a sticky box, but there are certain things that I don't know how to make, such as the text. The text must be bigger than the box, but if overflow: hidden, then it is not scrollable. If it's overflow: scroll, it scrolls only if the mouse is hovering over the section, but I want the mouse to be able to scroll anywhere on the page.
body {
display: flex;
}
.example {
width: 50%;
}
.block {
background: #888888;
height: 300px;
/* margin: 1em; */
border: 1px solid black;
}
.block.one {
height: 100px;
}
.box {
width: 100%;
height: 100px;
background: orange;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}
.sticky {
position: sticky;
top: 10px;
}
.orange{
background: orange;
}
<div class="example">
<div class="block one"></div>
<div class="block">
<p class="box sticky"> </p>
</div>
<div class="block"></div>
</div>
<div class="example">
<div class="block one"></div>
<div class="block orange"></div>
<div class="block"></div>
</div>

Is this how you want it?
To create the sticky effect use position: sticky.
Code:
#wrapper {
display:flex;
flex-direction:row;
}
#sticky {
position: sticky;
position: -webkit-sticky;
background: #f83d23;
width: 50%;
height: 300px;
top: 0;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 6px #000;
color: #fff;
}
#para{
width:50%;
margin:10px;
}
<div id="wrapper">
<div id="sticky">
sticky
</div>
<div id="para">
This is a para
</div>
</div>

Force image div container to stretch inside custom image box layout

I develop custom image box html control which contains image area along with small image thumbnails collection located at the bottom, top, left or right from the main image.
The problem is the main image div container doesnt stretch to fill remain area in main frame div.
Here is my code
.wvIBoxFrameDiv {
width: 300px;
height: 300px;
background: red;
}
.wvIBoxMainImageDiv {
background: green;
}
.wvIBoxThumbContainerDiv{
background: black;
overflow: hidden;
white-space: nowrap;
}
.wvIBoxThumbImagesContainerDiv{
background: blue;
display: inline-block;
}
.wvIBoxThumbNavigationDiv{
background: purple;
display: inline-block;
height: 30px;
width: 30px;
}
.wvIBoxThumbImageDiv{
background: orange;
display: inline-block;
height: 40px;
width: 40px;
}
<div class="wvIBoxFrameDiv">
<div class="wvIBoxMainImageDiv">
</div>
<div class="wvIBoxThumbContainerDiv">
<div class="wvIBoxThumbNavigationDiv"></div>
<div class="wvIBoxThumbImagesContainerDiv">
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
</div>
<div class="wvIBoxThumbNavigationDiv"></div>
</div>
</div>
Here I need thumbnails div container (with black background) placed in the bottom of main (red) frame div, while main image div (with green background) should stretch to fill remain area.
What am I do wrong?

Give height and width as 100% to .wvIBoxMainImageDiv
.wvIBoxFrameDiv {
width: 300px;
height: 300px;
background: red;
}
.wvIBoxMainImageDiv {
background: green;
height:100%; /*this here*/
width:100%; /*and here*/
}
.wvIBoxThumbContainerDiv{
background: black;
overflow: hidden;
white-space: nowrap;
}
.wvIBoxThumbImagesContainerDiv{
background: blue;
display: inline-block;
}
.wvIBoxThumbNavigationDiv{
background: purple;
display: inline-block;
height: 30px;
width: 30px;
}
.wvIBoxThumbImageDiv{
background: orange;
display: inline-block;
height: 40px;
width: 40px;
}
<div class="wvIBoxFrameDiv">
<div class="wvIBoxMainImageDiv">
</div>
<div class="wvIBoxThumbContainerDiv">
<div class="wvIBoxThumbNavigationDiv"></div>
<div class="wvIBoxThumbImagesContainerDiv">
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
</div>
<div class="wvIBoxThumbNavigationDiv"></div>
</div>
</div>

You can also use flex, (using auto-prefixer):
<div class="fullGallery">
<div class="mainImage">
</div>
<div class="bottomImages">
<div class="navigationButton">
</div>
<div class="imageContainer">
<div class="oneImage"></div>
<div class="oneImage"></div>
<div class="oneImage"></div>
</div>
<div class="navigationButton">
</div>
</div>
</div>
.fullGallery {
width: 300px;
height: 300px;
background-color: red;
display: flex;
flex-direction: column;
}
.mainImage {
width: 100%;
flex: 1;
background-color: yellow;
}
.bottomImages {
width: 100%;
height: 70px;
background-color: green;
display: flex;
}
.navigationButton {
width: 40px;
height: 100%;
background-color: pink;
}
.imageContainer {
flex: 1;
display: flex;
justify-content: space-around;
}
.oneImage {
background-color: blue;
width: 26%;
}
http://codepen.io/anon/pen/JYrdQJ
I like it more

Progress bar percentage align with bar

I'm creating a progress bar, currently the percentage are shown in right side, but now I want the percentage able to follow the bar, no matter the blue bar is short or long.
Example that I expect
.popup_survey_whitebox_percent {
font-size: 12px;
font-weight: bold;
font-style: italic;
color: #F30;
float: right;
margin-top: 10px;
}
.popup_survey_whitebox_progressbar {
background: #444;
width: 100%;
height: 5px;
border-radius: 10px;
}
.popup_survey_whitebox_progressbar_inner {
background: #0CF;
width: 100%;
height: 5px;
border-radius: 10px;
box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
margin-top: 5px;
}
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"></div>
</div>
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">15%</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"></div>
</div>

HTML:
Move popup_survey_whitebox_percent inside popup_survey_whitebox_progressbar_inner:
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;">
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</div>
</div>
</div>
CSS:
Change margin-top of popup_survey_whitebox_percent:
.popup_survey_whitebox_percent{
float:right;
margin-top: -15px;
font-size:12px;
font-weight:bold;
font-style:italic;
color:#F30;
}
See Fiddle

You could set the margin-left of the percentage values equal to the width of the progress bar.
$('.popup_survey_whitebox_percent').each(function() {
$(this).css('margin-left', $(this).next().next().find('.popup_survey_whitebox_progressbar_inner').css('width'));
});
.popup_survey_whitebox_percent {
font-size: 12px;
font-weight: bold;
font-style: italic;
color: #F30;
margin-top: 5px;
}
.popup_survey_whitebox_progressbar {
background: #444;
width: 100%;
height: 5px;
border-radius: 10px;
}
.popup_survey_whitebox_progressbar_inner {
background: #0CF;
width: 100%;
height: 5px;
border-radius: 10px;
box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
margin-top: -10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="popup_survey_whitebox_percent">75%</div>
<br />
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"></div>
</div>
<div class="popup_survey_whitebox_percent">15%</div>
<br />
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"></div>
</div>
<div class="test"></div>

try this
you only need to put your text percentage tag inside the progressbar html tag
div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;">
<span id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</span>
<br>
</div>
</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;">
<span id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">15%</span>
</div>
</div>
try this
http://jsfiddle.net/e4wvyamh/