I'm having an issue with getting the cards ('.card', '.card p' and '.card p:hover' classes) to darken their shadow upon hovering over them, unfortunately nothing happens. However, the hover function on the navigation bar is working perfectly fine. I am using JavaScript to make the navigation bar stick to the top of the window as you scroll. If anyone can spare some time to help me solve this problem, I would really appreciate it.
There is also another problem: When running the code in Chrome and maximizing the window, it becomes impossible to scroll all the way to the bottom (using Windows 10). If someone could help me fix this issue as well, I would be very grateful.
$(function() {
// Stick the #nav to the top of the window
var navigation = $('.navigation');
var navigationHomeY = navigation.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navigationHomeY;
if (shouldBeFixed && !isFixed) {
navigation.css({
position: 'fixed',
top: 0,
left: 0,
marginright: 0
});
isFixed = true;
} else if (!shouldBeFixed && isFixed) {
navigation.css({
position: 'relative',
left: 0,
marginright: 0
});
isFixed = false;
}
});
});{
-webkit-font-smoothing: antialiased;
}
body {
margin: 0%;
font-family: Helvetica;
}
.header {
position: relative;
left: 0px;
right: 0px;
top: 0px;
font-size: 187%;
text-align: left;
padding: 1.5%;
background-color: #cccccc;
color: white;
z-index: 1;
}
.card {
position: relative;
margin-right: 2%;
margin-left: 2%;
margin-top: 2%;
margin-bottom: 2%;
z-index: -2;
}
.card p {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 5px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
transition: 0.3s;
}
.card:hover p {
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
color: blue;
}
.navigation {
list-style-type: none;
position: relative;
left: 0px;
margin-right: 0px;
width: 100%;
top: 7.2%;
background-color: #cccccc;
box-shadow: 0px 3px 25px grey;
z-index: 0;
}
.wrap {
margin: 10px auto;
background: #cccccc;
padding: 10px;
margin-left: 0px;
margin-right: 0px;
width: 100%;
}
.navWrap {
height: 30px;
width: 100%;
z-index: 0;
}
.li a {
float: left;
display: block;
text-align: center;
padding: 1%;
color: white;
text-decoration: none;
transition: 0.5s;
}
.li a:hover:not(.active) {
background-color: #e6e6e6;
}
.active {
background-color: #3399ff;
}
.active:hover {
background-color: #80bfff;
transition: 0.5s;
}
br.clearLeft {
clear: left;
}<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<div class="header" ;>Hello</div>
<div class="navwrap">
<div class="navigation" ;>
<div class="li a" ;>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<br class="clearLeft" />
</div>
</div>
</div>
<div class="card" ;>
<div class="card p" ;>
<p>
Example text
</p>
<p>
Example text 2
</p>
<p>
Example text 3
</p>
<p>
Example text 4
</p>
</div>
</div>