Change url on window scroll

Question

I want to get an url change while I'm scroll the window, instead changing the menu class

I got reference from here

and i modify a bit just add some push state, but the problem is i have a fixed header so i want to change it when it hit this height which is 75px in this case, i add extra 75px for the scroll as well, but it still didn't work properly, actually how to make it precise when the div scrolled and the top of each div meet the bottom of the header, so the url and the active class is changing

HTML :

   <div class="m1 menu">
        <div id="menu-center">
            <ul>
                <li><a class="active" href="#home">Home</a>

                </li>
                <li><a href="#portfolio">Portfolio</a>

                </li>
                <li><a href="#about">About</a>

                </li>
                <li><a href="#contact">Contact</a>

                </li>
            </ul>
        </div>
    </div>
    <div id="home"></div>
    <div id="portfolio"></div>
    <div id="about"></div>
    <div id="contact"></div>

CSS :

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.menu {
    width: 100%;
    height: 75px;
    background-color: rgba(0, 0, 0, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.light-menu {
    width: 100%;
    height: 75px;
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#menu-center {
    width: 980px;
    height: 75px;
    margin: 0 auto;
}
#menu-center ul {
    margin: 15px 0 0 0;
}
#menu-center ul li {
    list-style: none;
    margin: 0 30px 0 0;
    display: inline;
}
.active {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
}
a {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: black;
    text-decoration: none;
    line-height: 50px;
}
#home {
    background-color: grey;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: url(images/home-bg2.png);
}
#portfolio {
    background-image: url(images/portfolio-bg.png);
    height: 100%;
    width: 100%;
}
#about {
    background-color: blue;
    height: 100%;
    width: 100%;
}
#contact {
    background-color: red;
    height: 100%;
    width: 100%;
}

JS :

$(document).ready(function () {
    $(document).on("scroll", onScroll);

    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");

        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');

        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top-75
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });


function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

Codepen : https://codepen.io/anon/pen/LdLgNo

score 0 · Answer 1 · answered Mar 23 '18 at 11:00

0

You only took care of the one side of this, here

$('html, body').stop().animate({
            'scrollTop': $target.offset().top-75
        }, 500, 'swing', function () {

For this function that scrolls the page to the right position when a navigation anchor is clicked, you have taken the 75px offset into account.

But you haven’t done it yet for the other part to this - the scroll handler, that checks where the page is scrolled to. The easiest way to do that would be if you calculate it into the offset you read, then you can leave the rest of the conditions after it unchanged:

 var scrollPos = $(document).scrollTop() + 75;

https://codepen.io/anon/pen/VXWVWW

answered Mar 23 '18 at 11:00

CBroe

91,630
14
92
150

Hi thanks for the respond, the problem is when it click, the div will be drag to the top, thanks @CBroe – Jim John Mar 23 '18 at 11:25
Well that’s because you are still setting `window.location.hash = target` after the animation - of course that aligns the element at the very top, as it usually does. How to fix that issue, see https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors – CBroe Mar 23 '18 at 12:08

Change url on window scroll

1 Answers1