We Keep Coding

how to change height specific div when scroll inside this div

I need help in JS :
I have page with div class .maincom inside with overlay-y: scroll. I want to scroll this div, and when scrolling I want to change height of div class .maincom from 160 to 350 .
Important: I don't want to change height of this div when I'm scrolling entire site (window). I want to change this height ONLY when I'm scrolling this div class .maincom .
Example code:
<div class="maincom">
<ul class="nav nav-tabs">
<li class="active">
Comments</li></ul>
<h2>Your comment</h2>
<form>...</form>
</div>
CSS:
.maincom {
position: fixed;
background-color: white;
width: 100%;
bottom: 0px;
right: 0px;
height: 160px;
overflow-x: hidden;
overflow-y: scroll;
display: block;
clear: both;
background: white;
margin-bottom: 0px;
z-index: 4;
}
Div "maincom" is overlay-y:scroll, with height: 160px . I'm searching for solution: when maincom is scrolled down, then height will be 350px . When scrolled up, height will be back as 160px
This isn't working correctly :
$(".maincom").on("scroll", function () {
var scrollTop = $(".maincom").scrollTop();
if (scrollTop > 100) {
$(".maincom").stop().animate({height: "160px"},200);
}
else {
$(".maincom").stop().animate({height: "350px"},200);
}
});
Any other solutions? :)
First step is completed now. here is the second/last one:
Update: Solution from Lime In The Coconut working fully great. Thanks a lot ! Now I have one more thing:
Example code 2:
<div class="reward">You can win 50 points for that</div>
<div class="maincom">
<ul class="nav nav-tabs">
<li class="active">
Comments</li></ul>
<h2>Your comment</h2>
<form>...</form>
</div>
and code for .reward class div:
.reward{
position: fixed;
background-color: white;
width: 100%;
bottom: 140px;
right: -20px;
height: 64px;
overflow-x: hidden;
overflow-y: scroll;
display: block;
clear: both;
background: white;
margin-bottom: 20px;
z-index: 5;
background-color: #0077dd;
color: white;
font-size: 10px;
opacity: 0.8;
}
And now: how to set JS - if .maincom is scrolled down (then height of .maincom increased) , bottom of .reward is increased from 140px to 300px .
if You know solution for that too, You are the best ! :)
Thanks !
Peter

try this, i have inserted more list elements in order to see the effects
let maincom = document.querySelector('.maincom')
maincom.addEventListener('scroll',function(){
if(this.scrollTop>0){
this.style.height ="360px"
}
if(this.scrollTop === 0){
this.style.height = '160px'
}
})
.maincom {
position: fixed;
background-color: red;
width: 100%;
height: 160px;
overflow-x: hidden;
overflow-y: scroll;
display: block;
clear: both;
background: white;
margin-bottom: 0px;
z-index: 4;
}
<div class="maincom">
<ul class="nav nav-tabs">
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
</ul>
<h2>Your comment</h2>
<form>...</form>
</div>

Share 100vh between div and position:sticky navbar

I want to share the initial visible area of my page between a slideshow and my navbar like the below diagram which will then stick at the top when you scroll down the document. This is where I've run into issues.
I've tried doing something like height: 90vh for my slideshow and height: 10vh for my navbar but I want the website to be dynamic and able to fit to most resolutions until you hit cellphone level or at least like 200% zoom on Microsoft edge wherein another stylesheet will be used.
I've also tried placing them within the same div, setting height: 90% for the slideshow and height: auto for the navbar. This worked best in terms of how dynamic it is but the position: sticky obviously didn't work because it only traverses the height of the parent div.
The one that works best is setting the slideshow height to height: 90vh and allowing the navbar to go accordingly. It kinda sorta works but not nearly good enough for me.
The navbar has to initially be at the bottom then stick to the top. If possible I'd rather have a purely CSS solution, but I am open to javascript. Though I'd rather have pure javascript as opposed to jQuery but if it's well explained I'm okay with it.
The actual question is: How do I make my navbar and my slideshow share the initial visible height dynamically?
Here is all the relevant code:
#container {
display: flex;
flex-direction: column;
height: 100vh;
}
.slideshow-base {
flex-grow: 1;
width: 100%;
margin: 0px;
}
.slideshow-container {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
}
.Slides {
position: absolute;
transform: translateX(-100%);
transition: transform 2s;
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
}
.Slides-Images {
width: 100%;
height: 100%;
object-fit: cover;
}
.navbar-base {
font-weight: bold;
z-index: 2;
font-variant: small-caps;
height: 100%;
width: auto;
top: 0px;
background-color: rgba(50, 64, 147, 0.9);
display: block;
border-bottom: 1px solid rgb(226, 208, 0);
}
<div id="container">
<!--Slideshow-->
<div class="slideshow-base" style="background-color: rgb(50, 64, 147); height: 90vh">
<div class="slideshow-container">
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-1.jpg" class="Slides-Images">
</div>
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-2.jpg" class="Slides-Images">
</div>
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-3.jpg" class="Slides-Images">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="dot-base">
<span class="dot" onclick="currentSlide(1)">᛫</span>
<span class="dot" onclick="currentSlide(2)">᛫</span>
<span class="dot" onclick="currentSlide(3)">᛫</span>
</div>
</div>
</div>
<hr />
<!--Sticky Navbar-->
<div class="navbar-base" style="width: 100%; height: auto; position: sticky;">
<ul>
<li class="navbar-button" style="display: inline-block;"> #Html.ActionLink("main page", "MainPage", "Home") </li>
<li class="navbar-button" style="display: inline-block;">
#Html.ActionLink("about", "About", "About")
<ul class="navbar-ddmenu">
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("academy", "Academy", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("the club", "DKClub", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("taebo", "TaeBo", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("founders and staff", "Staff", "About")</li>
</ul>
</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("contacts", "Contacts")</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("gallery", "Gallery")</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("shop dk", "Index", "Shop")</li>
</ul>
</div>
</div>

Use CSS Grids
body {
margin: 0;
}
#container {
width: 100vw;
background: #ccc;
padding: 10px;
height: 100vh;
display: grid;
grid-template-rows: 90vh 10vh;
grid-gap: 10px;
}
#container>div {
background: #999;
}
<section id="container">
<div>Sticky</div>
<div>NavBar</div>
</section>

Ok, I would use a flexbox approach for your initial view, then a bit of js to add a class on scroll:
window.onscroll = function() {
var nav = document.getElementById('nav');
var scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
if (scrollTop > 100) { // not sure how much you want it to scroll before it is made sticky
nav.classList.add("fixed");
} else {
nav.classList.remove("fixed");
}
}
body {
margin:0;
height:200vh; /* just so there is some scrolling */
}
.container {
height:100vh;
display:flex;
flex-direction:column;
}
.slideshow-base {
flex-grow:1; /* this will make shadow base take the rest of the available height to start with */
}
.fixed {
position:fixed;
top:0;
left:0;
right:0;
}
<div class="container">
<div class="slideshow-base" style="background-color: rgb(50, 64, 147); height: 90vh">
<div class="slideshow-container">
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-1.jpg" class="Slides-Images">
</div>
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-2.jpg" class="Slides-Images">
</div>
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-3.jpg" class="Slides-Images">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="dot-base">
<span class="dot" onclick="currentSlide(1)">᛫</span>
<span class="dot" onclick="currentSlide(2)">᛫</span>
<span class="dot" onclick="currentSlide(3)">᛫</span>
</div>
</div>
</div>
<hr />
<!--Sticky Navbar-->
<div id="nav" class="navbar-base">
<ul>
<li class="navbar-button" style="display: inline-block;"> #Html.ActionLink("main page", "MainPage", "Home") </li>
<li class="navbar-button" style="display: inline-block;">
#Html.ActionLink("about", "About", "About")
<ul class="navbar-ddmenu">
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("academy", "Academy", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("the club", "DKClub", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("taebo", "TaeBo", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("founders and staff", "Staff", "About")</li>
</ul>
</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("contacts", "Contacts")</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("gallery", "Gallery")</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("shop dk", "Index", "Shop")</li>
</ul>
</div>
</div>

You can probably wrap those 2 elements in a wrapper (and optionally give it a height) and use flexbox to make them share space.
In the example below, the slideshow will always cover 90% of the wrapper's height and nav will cover 10% of it.
.slideshow,
.nav {
border: 2px solid #000
}
.wrapper {
display: flex;
flex-direction: column;
height: 90vh
}
.nav {
/* An arbitrary value to start with */
flex-grow: 1;
}
.slideshow {
/* Grow this element 9 times more than the other element. */
flex-grow: 9;
}
<div class="wrapper">
<div class="slideshow">
Slideshow content
</div>
<nav class="nav">
Navigation content
</nav>
</div>

Setting up an offset with anchor tags for a div

I have made a single page which has a navbar and with links pointing to section id in the page.
However, when I click on the link the section of the page scrolls down till the top of the section and due to my sticky navbar, the top part of my section goes behind it.
How do I create an offset height which would match my navbar height so that the div is visible at the right position?
Here is my a screenshot of what is happening.
Also, is there a way to smoothly scroll till the section? What is the easiest method to achieve this?
My example code:
HTML:
<nav>
<ul>
<li>Section 1</li>
<li>Sction 2</li>
<li>Section 3</li>
</ul>
</nav>
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>

Offsetting anchor hash tag links to adjust for fixed header
HTML :
Goto Section I
<!-- Some more content -->
<h3 id="section1" class="offset">Section I</h3>
<p>Section specific content</p>
CSS:
.offset:before {
display: block;
content: " ";
height: 150px; /* Give height of your fixed element */
margin-top: -150px; /* Give negative margin of your fixed element */
visibility: hidden;
}

Give padding-top to that section which is equal to the header height. Like if your header has a height: 40px then give padding-top: 40px to that section.
Have a look at the snippet below:
body {
margin: 0;
padding-top: 50px;
}
nav {
background: #eee;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
li {
padding: 15px;
}
.sec {
height: 200px;
margin-bottom: 30px;
background: #ff0;
padding-top: 48px;
}
<nav>
<ul>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</nav>
<div id="section1" class="sec">Section 1</div>
<div id="section2" class="sec">Section 2</div>
<div id="section3" class="sec">Section 3</div>
Hope this helps!

How to make an image in a separate div change on hover of nav?

I have a site I'm working on where I have a nav bar in a div at the top of the page followed by a separate div which contains an image directly below it.
I'm trying to figure out the best way to change the image by hovering over each part of the nav bar.
Basically I want an image for home to show up when the home nav feature is hovered and so on with the rest of the menu.
UPDATE:
As I tried to explain before (not as clear as I could have) I want to make each nav bar element (Home, Downloads, etc.) show a different image in the div below it. Here is the section of code for the two elements.
<li class="active">Home</li>
<li >About</li>
<li >Mods</li>
<li>Forums</li>
<li >Downloads</li>
<li>Blog</li>
</ul>
</div>
</nav>
<div class="parallax-container">
<div class="container" style="background: rgb(55,71,79); width:960px; padding-top: 10px; padding-left: 50px; border: 2px; border-radius: 50px;">
<div class="row">
<div class="hover-image white-text col s12 l6">
<img src="homeimage.png" class="hover image" style="height:auto; width:auto; max-width: 860px; max-height: 860px;"/>
<h5 class="hover-header" style="padding-left: 20px;">Home</h2>
<p class="hover-paragraph" style="padding-left: 25px;">Welcome to the page!</p>
</div>
</div>
</div>
<div class="parallax"><img src="/img/image.png"></div>
</div>
<style>
.hover-image {
position: relative;
width: 100%;
margin: auto;
}
.hover-header {
position: absolute;
top: 350px;
left: 10;
width: 100%;
}
.hover-paragraph {
position: absolute;
top: 380px;
width: 100%;
}
</style>
Page Layout

Try CSS something like this;
.nav:hover .image{
background-image: url('path/to/image.ext');
}
If you can share your code, I can be more specific.

try this code -
CSS -
#navImage img{
display:block;
width:500px;
height:auto;
}
#myNav{
list-style-type: none;
}
#myNav li {
display: inline;
padding: 10px;
}
#myNav li a:hover {
color:#00ffff;
}
#navImage img{
display:none;
}
HTML
<ul id="myNav">
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<div id="navImage">
<img src="img_chania.jpg" alt="Chania">
<img src="img_chania2.jpg" alt="Chania">
<img src="img_flower.jpg" alt="Flower">
<img src="img_flower2.jpg" alt="Flower">
</div>
JS to initialize (with jQuery) -
$("#myNav li a").on('mouseover', function(){
$("#navImage img").hide().eq($(this).closest('li').index()).show();
});
Please note, if you are working on responsive design(using bootstrap navigation), you need to do changes accordingly.
jsfiddle - https://jsfiddle.net/guruling/k2zgot5r/

.myButtonLink {
display: block;
width: 100px;
height: 100px;
background: url('/path/to/myImage.png') bottom;
text-indent: -99999px;
}
.myButtonLink:hover {
background-position: 0 0;
}
<a class="myButtonLink" href="#LinkURL">Leaf</a>
Do you want something like this. Please check this link:-http://kyleschaeffer.com/development/pure-css-image-hover/

hover-menu in right side of fixed div

I have a div with a fixed position (a top panel) which shall also contain a settings menu at the far right (currently via floating).
When hovering over the settings-image, I want to display a menu below the image.
I want the menu to be aligned to the right side just like the image.
<div id="panel" style="position:fixed">
<panel-entry 1>
<panel-entry 2>
<panel-entry n>
<div id="settings" style="float:right/snapped to the right side>
<img src=settings>
<ul>
<li>setting 1</li>
<li>setting 2</li>
<li>setting n</li>
</ul>
</div>
</div>
Any idea using jQuery very much appreciated, feel free to rearrange any html.

No jQuery necessary, just give your #panel a width:
#panel {
position: fixed;
width: 100%;
}
#settings {
float: right;
}
See DEMO.

Aside from your example not being HTML, I would anyhow correct the conceptual approach. There is no jQuery required for such a task, which can be done entirely in CSS.
You want your #panel to first of all contain a <ul> which will contain <li>s, which will be your <panel-entry>, those should be set as inline-block.
The #settings should be one of those, perhaps with a special class or id (we'll keep settings for now). You can position: absolute this to right: 0, or have it float. Don't use an image element for this, but rather use a background-image.
Inside this element, you will have a submenu: i.e. another <ul> with display: none, a position:absolute, right: 0 and top: X, so that X doesn't overlap with your #panel.
Next, you want to make the element visible on :hover of li#settings.
Here's a working demo
Basic HTML
<div id="panel">
<ul>
<li>Panel entry 1</li>
<li>Panel entry 2</li>
<li>Panel entry n</li>
<li id="settings">
<ul>
<li>setting 1</li>
<li>setting 2</li>
<li>setting n</li>
</ul>
</li>
</ul>
</div>
Basic CSS
#panel {
position: fixed;
top: 0;
width: 100%;
}
#panel > ul > li {
display: inline-block;
}
#panel > ul > li > ul {
display: none;
position: absolute;
top: {X};
right: 0;
}
li#settings {
background: url({youricon}) no-repeat top center;
position: absolute;
right: 0;
min-width: {youricon-x};
min-height: {youricon-y};
}
li#settings:hover > ul{
display: block;
}