Skip to content

Instantly share code, notes, and snippets.

@Dovineowuor

Dovineowuor/dovetec-org.markdown

Created August 15, 2022 08:54
Show Gist options
  • Save Dovineowuor/9fd2736cbc2b662d6b204bafbab2a498 to your computer and use it in GitHub Desktop.
Save Dovineowuor/9fd2736cbc2b662d6b204bafbab2a498 to your computer and use it in GitHub Desktop.
Download ZIP
Dovetec.org
Raw
index.html
<header>
<div class="small" id="header-scroll">
<h1><a href="#">DOVETEC.ORG</a></h1>
<nav>
<ul>
<li><a href="#1">Home</a></li>
<li><a href="#2">Portfolio</a></li>
<li><a href="#3">Products </a></li>
<li><a href="#4">Services</a></li>
<li><a href="#5">About Us</a></li>
<li><a href="#5">Our Articles</a>
<li><a href="#5">Contact Us</a></li>
</li>
</ul>
</nav>
</div>
</header>
<section id="1">
<h1>Home</h1>
</section>
<section id="2">
<h1>Portfolio</h1>
</section>
<section id="3">
<h1>Products</h1>
</section>
<section id="4">
<h1>Services </h1>
</section>
<section id="5">
<h1>About Us</h1>
</section>
<section id="5">
<h1>Our Articles</h1>
</section>
<section id="5">
<h1>Contact Us</h1>
</section>
Raw
script.js
//in case js in turned off
$(window).on('load', function () {
$("#header-scroll").removeClass("small")
});
$(window).scroll(function () {
var sc = $(window).scrollTop()
if (sc > 1) {
$("#header-scroll").addClass("small")
} else {
$("#header-scroll").removeClass("small")
}
});
//scrollspy
$(window).on('scroll', function () {
var sections = $('section')
, nav = $('nav')
, nav_height = nav.outerHeight()
, cur_pos = $(this).scrollTop();
sections.each(function() {
var top = $(this).offset().top - nav_height,
bottom = top + $(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {
nav.find('a').removeClass('active');
sections.removeClass('active');
$(this).addClass('active');
nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
}
});
});
Raw
style.css
@import url(https://fonts.googleapis.com/css?family=Bitter);
*
margin 0
padding 0
box-sizing border-box
font-family bitter
html,body
height 100%
min-height 100%
a
text-decoration none
color white
&.active
border-bottom 2px solid #85C2FF
.header
height auto
#header-scroll
position fixed
height 100%
background rgba(0,0,0,.4)
left 0
top 0
float left
width 100%
-ms-transition all 0.3s ease-out
-moz-transition all 0.3s ease-out
-webkit-transition all 0.3s ease-out
-o-transition all 0.3s ease-out
transition all 0.3s ease-out
h1
padding 200px 0
height 100%
font-size: 4em
text-align center
line-height 40px
-ms-transition all 0.3s ease-out
-moz-transition all 0.3s ease-out
-webkit-transition all 0.3s ease-out
-o-transition all 0.3s ease-out
transition all 0.3s ease-out
&.small
height auto
display inline-block
float left
h1
padding 10px 0
height auto
font-size 1rem
text-decoration none
font-weight bold
display inline-block
body
font-family 'Open Sans', sans-serif
nav
width 100%
height 60px
position fixed
top 0
ul
padding 20px
margin 0 auto
list-style none
text-align center
li
display inline-block
margin 0 10px
a
padding 10px 0
color #fff
font-size 1rem
text-decoration none
font-weight bold
transition all 0.2s ease
&:hover
color #85C2FF
h1
font-size 5rem
color #34495E
section
width 100%
height 100%
padding 200px 0
background #fff
border-bottom 1px solid #ccc
text-align center
&:nth-child(even)
background #ecf0f1
&:nth-child(odd)
background #eff9ff
.sections
section
&:first-child
margin-top 100px
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment