Difference between revisions of "Template:BNU-CHINA/article"
(24 intermediate revisions by the same user not shown) | |||
Line 15: | Line 15: | ||
<script> | <script> | ||
$(document).ready(function () { | $(document).ready(function () { | ||
− | |||
var baseline = $("#top_menu_14").height(); | var baseline = $("#top_menu_14").height(); | ||
− | + | var scrollToHash = function(hash) { | |
+ | if (hash.indexOf("#") == 0) { | ||
+ | var $target = $(hash); | ||
+ | $("html, body").animate({scrollTop: $target.offset().top - $(".sub-header").height() - baseline + 2}, "slow"); | ||
+ | } | ||
+ | }; | ||
+ | |||
$(".sub-header").css({ | $(".sub-header").css({ | ||
− | + | "transform": "translate3D(0, -100%, 0)", | |
+ | "top": baseline + "px" | ||
}); | }); | ||
$("article h2").each(function (index, item) { | $("article h2").each(function (index, item) { | ||
+ | var $temp = $(item).clone(); | ||
+ | $temp.children().remove(); | ||
$("ul.sub-nav").append($("<li>").append( | $("ul.sub-nav").append($("<li>").append( | ||
$("<a>").addClass("btn-filter btn") | $("<a>").addClass("btn-filter btn") | ||
.attr("data-tartget", index) | .attr("data-tartget", index) | ||
− | .text($ | + | .text($temp.text()) |
)); | )); | ||
}); | }); | ||
Line 33: | Line 41: | ||
$("ul.sub-nav").append($("<li>").append( | $("ul.sub-nav").append($("<li>").append( | ||
$("<a>").addClass("btn-filter btn") | $("<a>").addClass("btn-filter btn") | ||
− | + | .attr("href", "#") | |
− | + | .text("Top ▴") | |
)); | )); | ||
Line 44: | Line 52: | ||
if (($(window).scrollTop() <= $(".navbar-siren").height() + baseline)) { | if (($(window).scrollTop() <= $(".navbar-siren").height() + baseline)) { | ||
$(".sub-header").css({ | $(".sub-header").css({ | ||
− | "transform": "translate3D(0, -100%, 0)" | + | "transform": "translate3D(0, -100%, 0)" |
}); | }); | ||
} else { | } else { | ||
$(".sub-header").css({ | $(".sub-header").css({ | ||
− | "transform": "translate3D(0, 0, 0)", | + | "transform": "translate3D(0, 0, 0)" |
+ | }); | ||
+ | } | ||
+ | |||
+ | var currentIdx = -1; | ||
+ | $("article h2").each(function (index, item) { | ||
+ | if($(window).scrollTop() > $(item).offset().top - baseline - $(".sub-header").height()) { | ||
+ | currentIdx = index; | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | if($(window).scrollTop() + $(window).height() == $(document).height()) { | ||
+ | currentIdx = $("article h2").length - 1; | ||
+ | } | ||
+ | |||
+ | $("ul.sub-nav a").css({ | ||
+ | "color": "#278A75" | ||
+ | }); | ||
+ | |||
+ | if (currentIdx >= 0) { | ||
+ | $($("ul.sub-nav a")[currentIdx]).css({ | ||
+ | "color": "#D3853D" | ||
}); | }); | ||
} | } | ||
}); | }); | ||
+ | |||
+ | $("a[href]").on("click", function() { | ||
+ | var hash = this.href.substring(this.href.indexOf("#")); | ||
+ | scrollToHash(hash); | ||
+ | }); | ||
+ | |||
+ | scrollToHash(window.location.hash); | ||
+ | |||
}); | }); | ||
</script> | </script> | ||
<div class="sub-header text-right"> | <div class="sub-header text-right"> | ||
<ul class="sub-nav col-md-12"> | <ul class="sub-nav col-md-12"> | ||
− | |||
</ul> | </ul> | ||
</div> | </div> |
Latest revision as of 01:33, 19 September 2015