- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在构建一个页面网站,上面有一个粘性导航。我已经实现了几乎所有内容,但是当用户通过鼠标滚轮或浏览器滚动条滚动而不是使用导航时,我无法实现导航链接的突出显示。我想这可以通过向最接近顶部的部分添加预样式类来实现?
我的第二个问题是当用户在页面滚动时执行某些操作时如何停止滚动?
我的网站标记是
<nav class="columns col-12 main-nav">
<ul>
<li><a href="#page1" class="selected">a link</a></li>
<li><a href="#page2">another link</a></li>
<li><a href="#page3">cat</a></li>
<li><a href="#page4">dog</a></li>
</ul>
</nav>
<div class="container">
<section class="page" id="page1" data-stellar-background-ratio="1.75">
</section>
</div>
<div class="container">
<section class="page" id="page2" data-stellar-background-ratio="1">
</section>
</div>
这是我的 JQuery,用于导航滚动到相应的 id
$(document).ready(function() {
$('a').click(function() {
var el = $(this).attr('href');
var elWrapped = $(el);
scrollToEle(elWrapped, 40);
return false;
});
function scrollToEle(element, navheight) {
var offset = element.offset();
var offsetTop = offset.top;
var totalScroll = offsetTop - navheight;
$('body,html').animate({
scrollTop : totalScroll,
}, 2000, 'easeInCirc');
}
});
这就是我在用户单击导航链接时突出显示导航链接的方式。(我认为这不是一个好方法)
$(document).ready(function() {
$('nav a').click(function() {
$('nav .selected').removeClass('selected');
$(this).addClass('selected');
});
});
我对我糟糕的英语感到非常抱歉。我希望你能理解我的问题。我的问题是当用户滚动页面而不使用导航时如何突出显示链接。以及当页面滚动时用户点击页面时如何停止滚动。
最佳答案
我从另一篇文章中找到了我的问题的答案。如果有人觉得这有用的话,这就是
jQuery changing css on navigation when div # scrolls into view
$(window).height() // returns the viewport height
$(document).height() // returns the height of the entire document
$(window).scrollTop() // returns the Y position of the document that is at the top of the viewport
var topRange = 200, // measure from the top of the viewport to X pixels down
edgeMargin = 20, // margin above the top or margin from the end of the page
animationTime = 1200, // time in milliseconds
contentTop = [];
$(document).ready(function(){
// Stop animated scroll if the user does something
$('html,body').bind('scroll mousedown DOMMouseScroll mousewheel keyup', function(e){
if ( e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel' ){
$('html,body').stop();
}
});
// Set up content an array of locations
$('#sidemenu').find('a').each(function(){
contentTop.push( $( $(this).attr('href') ).offset().top );
});
// Animate menu scroll to content
$('#sidemenu').find('a').click(function(){
var sel = this,
newTop = Math.min( contentTop[ $('#sidemenu a').index( $(this) ) ], $(document).height() - $(window).height() ); // get content top or top position if at the document bottom
$('html,body').stop().animate({ 'scrollTop' : newTop }, animationTime, function(){
window.location.hash = $(sel).attr('href');
});
return false;
});
// adjust side menu
$(window).scroll(function(){
var winTop = $(window).scrollTop(),
bodyHt = $(document).height(),
vpHt = $(window).height() + edgeMargin; // viewport height + margin
$.each( contentTop, function(i,loc){
if ( ( loc > winTop - edgeMargin && ( loc < winTop + topRange || ( winTop + vpHt ) >= bodyHt ) ) ){
$('#sidemenu li')
.removeClass('selected')
.eq(i).addClass('selected');
}
});
});
});
这里
https://stackoverflow.com/posts/10144683/edit
// Assign the HTML, Body as a variable...
var $viewport = $('html, body');
// Some event to trigger the scroll animation (with a nice ease - requires easing plugin )...
$('#element').click(function() {
$viewport.animate({
scrollTop: scrollTarget // set scrollTarget to your desired position
}, 1700, "easeOutQuint");
});
// Stop the animation if the user scrolls. Defaults on .stop() should be fine
$viewport.bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
$viewport.stop().unbind('scroll mousedown DOMMouseScroll mousewheel keyup'); // This identifies the scroll as a user action, stops the animation, then unbinds the event straight after (optional)
}
});
关于javascript - 实现单页网站的导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16626312/
我有这个网站,这个特定页面是安全的,但是当它回发时,它回发到一个不安全的页面。如何解决? 我正在使用 ASP.NET 向导。我有这个页面 - checkout.aspx,页面包含这个控件 checko
我有 2 个 azure 网站 - 两个独立的项目 我现在有 2 个网址: myazurewebsite.azurewebsites.net myazureblog.azurewebsites.net
我有 2 个 azure 网站 - 两个独立的项目 我现在有 2 个网址: myazurewebsite.azurewebsites.net myazureblog.azurewebsites.net
环境: 旧网站: React 托管在 Heroku URL( http://sameurl.com ) 新网站: Java 托管在 Heroku URL ( http://sameurl.com )
我已在 Windows Azure 上注册了一个测试帐户来对其进行测试。我构建了一个 Hello world ASP.NET Web 应用程序 + 数据库只是为了测试。 我安装了 Visual Stu
我有一个可以收集和显示各种测量值的产品(不会详细介绍)。正如人们所期望的那样,显示部分是一个数据库+建立在其之上的网站(使用 Symfony)。 但是,我们可能还会创建一个 API 来向第三方公开数据
这个问题在这里已经有了答案: Software keyboard resizes background image on Android (16 个答案) 关闭 8 年前。 我有一个类似的问题:So
这个问题似乎很常见,但我真的无法根据现有答案解决问题。 我有一个简单的 maven 项目,没有任何复杂的部署配置等,并且想在点击“mvn site”时生成一个 Maven CheckStyle 报告。
有没有人看过有关何时进行横向扩展与纵向扩展的最佳选择的任何分析或信息。什么时候一个比另一个更有意义。 目前,在标准模式和基本模式下,2 个小型实例的费用与 1 个中型实例的费用相同。 拥有 2 个小型
有没有办法找到 azure 网站何时停止? (我通过门户网站停止了网站,但我不记得是什么时候......) 我正在寻找一些日志,但没有找到任何有用的内容。 谢谢。 最佳答案 您拥有的最接近的是 azu
我目前在 Azure VM 的 IIS 中拥有一个网站。我已将该站点复制到 2 个可用区域中的 2 个虚拟机上。 这可以保护网站免遭停机。 我需要为高负载时刻实现一些可扩展性。这似乎就是创建音阶集的目
我有一个托管在 Azure 上的网站 ( http://mike-ward.azurewebsites.net/ )。我从 Azure 门户设置了一个指向(引用?)我的网站的 Azure CDN。根据
我有一个 Azure 网站(不是 Web 角色),有 2 个槽:生产和暂存。 我只想为生产插槽启用 CDN,而不是为登台启用,问题是我找不到识别主机插槽的方法。 RoleEnvironment 不可用
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提出有关书籍、工具、软件库等建议的问题。您可以编辑问题,以便可以用事实和引用来回答它。 4年前关
我们正在考虑将一些网站从 Azure 云服务迁移到 Azure 网站(事情似乎就是这样进行的)。显然,我们被明确告知云服务不会保留文件系统状态,因为它们会在机器故障时重新部署。 我假设网站是基于 Bl
我有一个 Azure 网站,需要使用在 VM 上运行的 Elasticsearch 服务。 虽然我需要能够锁定对 Elasticsearch 的访问,以便只有 Azure 网站可以访问它,但我似乎无法
我有一个 azure 网站,位于 yis3.azurewebsites.net - 我已将其提升为“共享”网站,以便我可以使用自定义域。我拥有从 123-reg.co.uk 购买的域名 yorkshi
我正在使用 abcPDF 动态创建 PDF。 我想保存这些 PDF,以便客户随时检索。最简单的方法(也是我现在在当前服务器上所做的方法)是将完成的 PDF 保存到文件系统。 看来我一直坚持使用 blo
我们正在尝试了解 Windows Azure 管理 API 为 Azure 网站(而非 Webroles)返回的监控数据的复杂性 例如,下图描述了为 CPUTime 检索的数据点。它似乎表明,在晚上
看起来真的很愚蠢,因为我找不到它: 门户网站似乎不太直观,我如何为一个“网站”付费并在其中运行最多 500 个网站?我想当我通过单击左下角的加号添加“网站”时,我添加了整个虚拟机而不是子站点。如何仅添
我是一名优秀的程序员,十分优秀!