如何获得导航按钮的效果

时间:2015-06-10 19:16:43

标签: javascript jquery css html5 url

我正在编写此代码以根据网址更改我的导航链接颜色(白色到#03c1cb)但是它没有正确运行请帮助我。我想更改该特定网址的导航链接颜色  我的HTML代码是

<a href="#home" id="start1" class="scroll" style="text-decoration:none;position:absolute;
       right:450px;top:37px;font-weight:bold;color:white;font-size:15px;z-index:200;
       transition:0.5s"  onmouseover="big(this)" onmouseout="small(this)">HOME</a>


function big(x) {

    x.style.fontSize = "17px";
    x.style.color = "#03c1cb";
}

function small(x) {
    var y = location.hash;
    if (x.href == y) {
        x.style.fontSize = "17px";
        x.style.color = "#03c1cb";
    } else {
        x.style.color = "white";
        x.style.fontSize = "15px";
    }
}

function isElementInViewport(el) {
    //special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $j(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $j(window).width() */
    );
}

// url change on clicking
$(document).ready(function() {
    $(".scroll").click(function(e) {
        e.preventDefault();
        var section = this.href,
            sectionClean = section.substring(section.indexOf("#"));

        $("html, body").animate({
            scrollTop: $j(sectionClean).offset().top
        }, 1000, function() {
            window.location.hash = sectionClean;
        });

    });
});
// listen for the scroll event
$(document).on("scroll", function() {
    console.log("onscroll event fired...");
    // check if the anchor elements are visible
    $(".anchor").each(function(idx, el) {
        if (isElementInViewport(el)) {
            // update the URL hash
            if (window.history.pushState) {
                var urlHash = "#" + $j(el).attr("id");
                window.history.pushState(null, null, urlHash);
            }
        }
    });
});

请帮帮我

0 个答案:

没有答案