How to change the height of a scrollbar thumb? - javascript

Is there any way to change the height of a scrollbar to a fixed height and change the amount of content scrolled accordingly? This is my current css code.
::-webkit-scrollbar {
width: 30px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px #003B7C;
border-radius: 10px;
background: white;
border-left: 8px solid rgba(255,255,255,0);
border-right: 8px solid rgba(255,255,255,0);
background-clip: content-box;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: linear-gradient(to right,#003B7C, #00538B, #83BBE6);
border-radius: 8px;
}

https://jsfiddle.net/j6gmobuz/6/
.visible-scrollbar::-webkit-scrollbar-thumb {
background-color: #acacac;
border-radius: 50px;
height: 120px;
}
I was able to partly control the height of the scroll thumb by simply using height property on "::-webkit-scrollbar-thumb".
It appears to be minimum height value which I wasn't able to set a new value below it.
Maybe this could help.

Scrollbar height is not about "::-webkit-scrollbar", it's about content height. You must give "max-height" and "overflow-y" to your content. You can't define height for a vertical scrollbar. That is dependent on content size.
Let's say you have a thing like this:
<div class="wrapper">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat adipisci itaque beatae quisquam corporis. Eos praesentium temporibus autem assumenda enim aspernatur culpa, esse quam, optio, molestias dolor sapiente vel deserunt!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit provident illo placeat nemo sint dolores quod temporibus, doloremque repudiandae, cum architecto, nostrum aut ipsum atque. Aspernatur autem error unde praesentium!</p>
</div>
If you write CSS like this:
.wrapper {
width: 300px;
max-height: 200px;
overflow-y: scroll;
}
you can specify height.
Look this codepen.

Related

Sticky header and hidden content with box-shadow

I'm new to coding and on my way to becoming a Junior Dev. This is also my first post on Stack Overflow.
Situation:
I have made a sticky header that has a box-shadow property intended to uncover content when scrolling down and hover on the body section. The box-shadow values are set to make the content hidden and only the nav header appears as visible. The header has position: fixed;
Question:
I was wondering if it's possible to make my content still be as hidden when the browser is open (just at the moment of opening, but unhide it when scrolled on the body section. If so, where could I apply the box-shadow property or is there a better way to do it? My knowledge is limited but so I'm looking for ways.
Code
window.addEventListener("scroll", function() {
const header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0);
})
/* experimental start */
.wrapper-nav {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
display: flex;
transition: 3s;
padding: 20px 40px;
justify-content: space-around;
background-color: goldenrod;
box-shadow: 0px 400px 300px 1000px;
color: blueviolet;
z-index: 1;
}
.wrapper-nav:hover {
box-shadow: none;
transition: 0.6s;
}
<header>
<nav>
<div class="container-nav">
<div class="wrapper-nav">
</div>
</div>
</nav>
</header>
<main>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At impedit architecto, obcaecati eligendi, iste laborum est, nobis quibusdam magni ratione eum odio ut voluptatem quo adipisci repellendus? Consectetur, possimus perferendis.
</p>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At impedit architecto, obcaecati eligendi, iste laborum est, nobis quibusdam magni ratione eum odio ut voluptatem quo adipisci repellendus? Consectetur, possimus perferendis.
</p>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At impedit architecto, obcaecati eligendi, iste laborum est, nobis quibusdam magni ratione eum odio ut voluptatem quo adipisci repellendus? Consectetur, possimus perferendis.
</p>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At impedit architecto, obcaecati eligendi, iste laborum est, nobis quibusdam magni ratione eum odio ut voluptatem quo adipisci repellendus? Consectetur, possimus perferendis.
</p>
</main>
Additional: Any improvements on how to write a better code or create a better inquiry on StackOverflow are welcome.
Thank you for your time.
Realized I need to change some CSS after receiving help. Thank you!
.wrapper-nav {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
display: flex;
transition: 2s;
padding: 20px 40px;
justify-content: space-around;
background-color: goldenrod;
}
.wrapper-nav:hover {
box-shadow: none;
transition: 2s;
box-shadow: 0px 400px 300px 1000px;
color: blueviolet;
z-index: 1;
}
Welcome!
const main= document.querySelector("main");
window.addEventListener("scroll", function() {
const header = document.querySelector("header");
main.style.boxshadow=none;
header.classList.toggle("sticky", window.scrollY > 0);
})
window.addEventListener("DOMContentLoaded"),function(){
main.style.boxshadow= 0px 400px 300px 1000px;
}
Due to short time, I didn't run it but tried to answer the question on DOMload event the content is hidden on scroll I change the style to none to make it visible.

Background "Jumps" on revealing sidebar with content

I am trying to make a sidebar that reveals on pressing a button.
Everything works fine until I put some content in the sidebar. The background jumps when the sidebar is revealed.
Here is sample code:
document.getElementById('btn').addEventListener('click', ()=>{
let sidebar = document.getElementById('sidebar');
sidebar.style.width = '40vw';
let p = document.querySelector('#sidebar p');
p.style.display = 'block';
})
*{
margin: 0;
padding: 0;
}
#main{
display: flex;
}
#sec1{
width: 60vw;
height: 100vh;
background: red;
}
#sec2{
width: 40vw;
height: 100vh;
background-color: #bdd9d4;
}
#sidebar{
width: 0;
height: 100vh;
position: absolute;
top: 0;
right:0;
z-index: 1;
transition: width .5s;
background: green;
}
#sidebar p{
display: none;
}
<div id="main">
<div id="sec1">
<button id="btn">Open Sidebar</button>
</div>
<div id="sec2">
</div>
</div>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sapiente amet similique? Architecto dolor, nulla neque natus incidunt labore dignissimos? Mollitia reprehenderit rerum unde iusto, consequatur explicabo molestiae cumque vero!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit doloremque sit delectus exercitationem reiciendis? Sunt, dolore ut cum, quod aliquam porro et similique, deleniti voluptatum neque maiores sed! Optio, fugit ipsam sequi quae incidunt pariatur hic deleniti! Eos atque vel praesentium delectus necessitatibus illo, iste officia modi nobis, est voluptatem sequi a quo quae quidem labore architecto magni aspernatur? Doloremque, libero fugiat accusantium asperiores aspernatur officiis numquam velit ullam dolore aliquam vitae tenetur, eaque vel deleniti! Eum magni officiis nihil?</p>
</div>
How do I stop the Jump without removing the content?
I also tried playing with variations of display and visibility to hide the elements.
As stated in the previous answers, your content jumps because you are animating the width of the container. The content (text) within it, will always try to fit, and this is why your have this effect.
In order to prevent this, do not animate the width, but animate the position.
#sidebar{
width: 0;
height: 100vh;
position: absolute;
top: 0;
right:0;
z-index: 1;
transition: transform .5s; /* modified */
background: green;
transform: translateX(120%); /* added */
}
#sidebar.showSidebar {
transform: translateX(0);
}
Remove this part from your code:
#sidebar p{
display: none; /* need to remove this from your code */
}
You might also need to add overflow-x: hidden to the Parent Element of your sidebar (in this case, the <body>), if horizontal scrollbars appear.
And this is the only JS required:
document.getElementById('btn').addEventListener('click', function(){
document.getElementById('sidebar').classList.add('showSidebar');
});
To hide the .sidebar again, you just need to remove the .showSidebar class :
document.getElementById('sidebar').classList.remove('showSidebar');
Using transform: translate() within CSS transitions is more efficient than using 'width' or 'right', as it doesn't cause layout/reflow (recalculation of the whole elements' size and/or position). It, along with opacity, are the only two transitionable properties that only affect the 'composition' part of the rendering of the webpage.
high-performance-animations article - the exact same principles apply to transitions also.
The "jump" is caused by the fact that when you click on the button, the offset width of your text can't really fit in the div that is growing. In other words, there is an instant, where the div that contains the text is something like 1px while your text is really bigger. So, there is many solutions including:
Hide the text overflow (it may work but the text will still "dance" while the div is growing)
I was thinking of something like :
#sidebar p{
display: none;
overflow: hidden;
}
Put a delay before displaying the text so the div will have enough time to be wide enough for the text :)
document.getElementById('btn').addEventListener('click', ()=>{
let sidebar = document.getElementById('sidebar');
sidebar.style.width = '40vw';
let div = document.querySelector('#sidebar div');
let text = div.children[0].innerText;
div.children[0].innerText = "";
div.style.display = 'block';
setTimeout(()=>{
div.children[0].innerText = text;
}, 500)
})
*{
margin: 0;
padding: 0;
}
#main{
display: flex;
}
#sec1{
width: 60vw;
height: 100vh;
background: red;
}
#sec2{
width: 40vw;
height: 100vh;
background-color: #bdd9d4;
}
#sidebar{
width: 0;
height: 100vh;
position: absolute;
top: 0;
right:0;
z-index: 1;
transition: width .5s;
background: green;
}
#sidebar div{
display: none;
}
<div id="main">
<div id="sec1">
<button id="btn">Open Sidebar</button>
</div>
<div id="sec2">
</div>
</div>
<div id="sidebar">
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sapiente amet similique? Architecto dolor, nulla neque natus incidunt labore dignissimos? Mollitia reprehenderit rerum unde iusto, consequatur explicabo molestiae cumque vero!</p>
</div>
</div>
I've got a much more elegant solution than my previous attempt which I deleted as it caused an unwanted scrollbar. Simply add a child DIV for the sidebar contents with a fixed width and put overflow hidden on the sidebar. The sidebar can grow in width revealing the fixed width content which is hidden by the overflow. Any good?
document.getElementById('btn').addEventListener('click', ()=>{
let sidebar = document.getElementById('sidebar');
sidebar.style.width = '40vw';
let p = document.querySelector('#sidebar p');
p.style.display = 'block';
})
*{
margin: 0;
padding: 0;
}
#main{
display: flex;
}
#sec1{
width: 60vw;
height: 100vh;
background: red;
}
#sec2{
width: 40vw;
height: 100vh;
background-color: #bdd9d4;
}
#sidebar{
width: 0;
height: 100vh;
position: absolute;
overflow: hidden;
top: 0;
right:0;
z-index: 1;
transition: width .5s;
background: green;
}
#sidebar-contents {
width: 40vw;
}
#sidebar p{
display: none;
}
<div id="main">
<div id="sec1">
<button id="btn">Open Sidebar</button>
</div>
<div id="sec2">
</div>
</div>
<div id="sidebar">
<div id="sidebar-contents">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sapiente amet similique? Architecto dolor, nulla neque natus incidunt labore dignissimos? Mollitia reprehenderit rerum unde iusto, consequatur explicabo molestiae cumque vero!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit doloremque sit delectus exercitationem reiciendis? Sunt, dolore ut cum, quod aliquam porro et similique, deleniti voluptatum neque maiores sed! Optio, fugit ipsam sequi quae incidunt pariatur hic deleniti! Eos atque vel praesentium delectus necessitatibus illo, iste officia modi nobis, est voluptatem sequi a quo quae quidem labore architecto magni aspernatur? Doloremque, libero fugiat accusantium asperiores aspernatur officiis numquam velit ullam dolore aliquam vitae tenetur, eaque vel deleniti! Eum magni officiis nihil?</p>
</div>
</div>

Text color gradient on the last line of an article

I have this code, which is an article with a toggle anchor "read more" and "read less", i want to add a gradiant color to the last line of the visible area of the article (before your press "read more" ).
This image may give you a clear idea :
There is the code:
$('.wrapper').find('a[href="#"]').on('click', function (e) {
e.preventDefault();
this.expand = !this.expand;
$(this).text(this.expand?"Read less":"Read more");
$(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
});
.small {
height: 50px;
width: 255px;
overflow:hidden;
}
.big {
height: auto;
width: 255px;
}
<script
src="https://code.jquery.com/jquery-1.9.1.min.js"
integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
crossorigin="anonymous">
</script>
<div class="wrapper">
<div class="small">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta aut dolores autem officia eveniet, earum, necessitatibus et, in ut dolorum optio id hic numquam repudiandae? Quos expedita aliquam nobis adipisci?.</p>
</div>
Read more
</div>
Thank you.
You could achieve that effect with CSS only, making use of pseudo selectors and setting the background of the pseudo element. Something like the following will make that possible. You can play a bit with the positioning to your liking.
.small p
{
position: relative;
}
.small p:after
{
content: "";
display: block;
height: 25px;
width: 100%;
position: absolute;
bottom: 0;
background: rgba(240,248,255,0) linear-gradient(to top,#fff,rgba(255,255,255,0)) repeat scroll 0 0;
}
<div class="wrapper">
<div class="small">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta aut dolores autem officia eveniet, earum, necessitatibus et, in ut dolorum optio id hic numquam repudiandae? Quos expedita aliquam nobis adipisci?.</p>
</div> Read more
</div>
You could try using linear-gradient
$('.wrapper').find('a[href="#"]').on('click', function (e) {
e.preventDefault();
this.expand = !this.expand;
$(this).text(this.expand?"Read less":"Read more");
$(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
});
.small {
height: 50px;
width: 255px;
overflow:hidden;
background-image: linear-gradient(to bottom, #000, #000, #fff);
color:transparent;
-webkit-background-clip: text;
}
.big {
height: auto;
width: 255px;
}
<script
src="https://code.jquery.com/jquery-1.9.1.min.js"
integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
crossorigin="anonymous">
</script>
<div class="wrapper">
<div class="small">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta aut dolores autem officia eveniet, earum, necessitatibus et, in ut dolorum optio id hic numquam repudiandae? Quos expedita aliquam nobis adipisci?.</p>
</div> Read more
</div>
Taking into account your example, this is my recommendation to solve your problem, there are several ways to do it, but an easy one without adding any additional HTML elements, would be to use the after pseudo selector
$('.wrapper').find('a[href="#"]').on('click', function (e) {
e.preventDefault();
this.expand = !this.expand;
$(this).text(this.expand?"Read less":"Read more");
$(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
});
.small {
height: 50px;
width: 255px;
overflow:hidden;
}
.small:after {
height: 1em;
width: 100%;
position: absolute;
top: calc(50px - 0.5em);
background: rgba(240,248,255,0) linear-gradient(to top,#fff,rgba(255,255,255,0)) repeat scroll 0 0;
content: '';
}
.big {
height: auto;
width: 255px;
}
<script
src="https://code.jquery.com/jquery-1.9.1.min.js"
integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
crossorigin="anonymous">
</script>
<div class="wrapper">
<div class="small">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta aut dolores autem officia eveniet, earum, necessitatibus et, in ut dolorum optio id hic numquam repudiandae? Quos expedita aliquam nobis adipisci?.</p>
</div> Read more
</div>

Dynamic changing height to tallest div on window resize

I am trying to use jQuery to set a set of div to the heigh of the tallest div. I have got the initial function working, where it gets the site and applies it to the rest of the divs on the page.
I also am trying to recalculate the heigh of the div in resize. In the JSfiddle, you can see that when you shrink the text expands out of the card/div.
I have tried to put the function into the resize function however in doesn't re-fire. I'm not sure what i am doing wrong.
I'm a JS beginner, apologies.
HTML
<div class="fluid-container grey-bg">
<div class="container">
<div class="card-default width-25 items">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque hic aliquid ea id, perferendis mollitia nam consequatur, ut rerum animi nisi iste, quae provident atque placeat repudiandae impedit delectus sequi.
</div>
</div>
<div class="card-default width-25 spacer items">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex sed voluptatum rem iste
</div>
</div>
<div class="card-default width-25 spacer items">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis omnis, quos id quaerat magni nobis blanditiis, esse magnam provident cupiditate harum non! Modi cupiditate earum eos repudiandae impedit nemo repellendus!
</div>
</div>
<div class="card-default width-25 items">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid laboriosam magni placeat numquam
</div>
</div>
</div>
</div>
CSS
.card-default {
background-color: #fff;
border-radius: 10px;
color: #333333;
min-height: 100px;
box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.25);
box-sizing: border-box;
padding: 20px 0px;
text-align: center;
margin-bottom: 20px;
display: block;
float: left;
position: relative;
width: 100%;
}
.card-default.width-25 {
width: 23%;
margin-left: 0px;
margin-right: 0px;
padding: 20px 20px;
}
JS
function cardEqualHeight() {
var maxHeight = -1;
$('.items').each(function() {
maxHeight = maxHeight >= $(this).height() ? maxHeight : $(this).height();
});
$('.items .content').each(function() {
$(this).height(maxHeight);
});
}
cardEqualHeight();
https://jsfiddle.net/k3lh4m/7wmfox9m/
Add this to the containter class and don't use your JS function and there you go!
.container {
display: flex;
flex-wrap: wrap;
}
jsfiddle

Sticky Header Logo Hover [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I found this website today http://www.mcdonalds.de/. Does anyone know how to make a sticky header like this? Only logo scroll down the navigation hide and logo hover show the navigation.
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.
This is just a ridiculous implementation but I think you might get the idea.
$(window).scroll(function() {
var $container = $(".container");
var container_offset = $container.offset().top - $(window).scrollTop();
console.log(container_offset);
if(container_offset){
$container.addClass('fixed');
}else{
$container.removeClass('fixed');
}
});
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
background-color: #bdc3c7;
padding:0;
margin:0;
}
.header {
background-color: #3498db;
float: left;
width: 100%;
height: 70px;
transition: width .3s;
}
.container.fixed .header {
width: 100px;
max-width: 900px;
position: fixed;
top: 20px;
}
.container.fixed .header ul {
display: none;
}
.container.fixed .main {
margin-top: 70px;
}
h1 {
float: left;
}
ul {
float: left;
}
ul li {
display: inline-block;
}
.container {
margin: 0 auto;
width: 100%;
padding: 20px;
background-color: #34495e;
float: left;
}
.main {
min-height: 1000px;
color: #fff;
float: left;
line-height: 1.4em;
}
p {
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<header class="header">
<h1>logo</h1>
<ul>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
</ul>
</header>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>
</div>
</div>
Of course you can create it by yourself. But I think you want a quick and easy solution.
That's why I would recommend to use this:
http://janpaepke.github.io/ScrollMagic/
If you want to create it by yourself I would recommend to use jQuery at least. Read about these topics:
CSS3 Transition
jQuery .animate
jQuery scroll event
CSS Positioning (Section Fixed)
jQuery toggleClass
jQuery .offset
What you have to do is:
Create two classes
One of them looks like the "big bar" and one like the "small bar"
Triggering the scroll event executes the class change (toggle). You have to animate it via transition or jQuery .animate. You can get via the ".offset" method whether the element is at the top (offset = 0) or not.
I've created an example for you. You have to replace the button click event with a scroll event. You also have to check which value the offset has. If it's at the top use the class "big" otherwise "small".
You have to add a "position: fixed" to the CSS of the header (#header). The div is then "glued" to the top of the window. You'll achieve this effect where the rest of the content scroll behind the header bar.
function scrollybolly(){
var header = document.getElementById("header");
if(header.className == "big"){
header.className = "small";
}else{
header.className = "big";
}
}
.big{
width: 200px;
height: 40px;
border: solid black 1px;
}
.small{
width: 50px;
height: 40px;
border: solid black 1px;
}
#header{
-webkit-transition: width 2s ease;
-moz-transition: width 2s ease;
-ms-transition: width 2s ease;
-o-transition: width 2s ease;
transition: width 2s ease;
}
<div id="header" class="big"></div>
<Button onClick="scrollybolly()">Click here to simulate a scroll event</Button>
What I've used:
http://www.w3schools.com/css/css3_transitions.asp
http://www.w3schools.com/tags/tag_button.asp
https://developer.mozilla.org/en-US/docs/Web/API/Element/className
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Categories

Resources