个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
你好网络爱好者，我希望你能帮我解决一个问题。
我正在使用 bootstrap 创建一个网站，该网站使用 scrollspy 通过导航栏导航到页面的某些部分。我可以让 URL 不显示的唯一方法 "#section-2"当滚动到页面的一部分时，在我的 <head> 中调用我的 javascript .
现在的问题...
我试图添加一个 FAQ 部分，这将是一个完全不同的页面，希望它能链接回原始页面的特定部分。
好像是FAQ <a> tag除非调整浏览器大小，否则无法正常工作..
这已经是 scrollspy 的两个错误了!! bootstrap 遇到这么多 bug 正常吗？
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Day & Night | Responsive Web Design
</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js">
</script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js">
</script>
</head>
<body data-spy="scroll" data-target="#myNavbar" data-offset="125">
<nav id="myNavbar" class="navbar navbar-dn navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<a class="navbar-brand" style="color:#2c3e50;">
Day
<img src="../images/dnlogoc.png" height="35px"/>
Night
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav" style="text-align:center;">
<li class="active">
<a href="#section-1">
About Us
</a>
</li>
<li>
<a href="#section-2">
What We Do
</a>
</li>
<li>
<a href="#section-3">
Our Process
</a>
</li>
<li>
<a href="#section-4">
Our Work
</a>
</li>
<li>
<a href="#section-5">
Get in touch
</a>
</li>
<li>
<a href="/faq">
FAQ
</a>
</li>
</ul>
</div>
</nav>
<div class="container day" style="padding-top:75px;">
<hr>
<h2 class="center" id="section-1">
Web Solutions, LLC
</h2>
<hr>
<div class="row">
<div class="col-lg-4">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.
</p>
</div>
<div class="col-lg-4" style="text-align:center;">
<img src="../images/dnlogoc.png" height="200px" class="mainimg">
</div>
<div class="col-lg-4">
<p>
Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.
</p>
</div>
</div>
<p>
Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.
</p>
</div>
<div class="container day">
<hr>
<h3 class="center" id="section-2">
What We Do
</h3>
<hr>
<div class="row">
<!-- Boxes de Acoes -->
<div class="col-xs-12 col-sm-4 col-lg-4 smallpad">
<div class="box">
<div class="icon">
<div class="image">
<i class="fa fa-map-marker">
</i>
</div>
<div class="info">
<h3 class="title">
Local Search Engine Optimization
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper.
</p>
<div class="more">
<a href="#" title="Title Link">
Read More
<i class="fa fa-angle-double-right">
</i>
</a>
</div>
</div>
</div>
<div class="space">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-lg-4 smallpad">
<div class="box">
<div class="icon">
<div class="image">
<i class="fa fa-laptop">
</i>
</div>
<div class="info">
<h3 class="title">
Mobile Friendly Web Design
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper.
</p>
<div class="more">
<a href="#" class="hover" title="Title Link">
Read More
<i class="fa fa-angle-double-right">
</i>
</a>
</div>
</div>
</div>
<div class="space">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-lg-4 smallpad">
<div class="box">
<div class="icon">
<div class="image">
<i class="fa fa-mobile">
</i>
</div>
<div class="info">
<h3 class="title">
Responsive - Mobile Friendly Web Design
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper.
</p>
<div class="more">
<a href="#" title="Title Link">
Read More
<i class="fa fa-angle-double-right">
</i>
</a>
</div>
</div>
</div>
<div class="space">
</div>
</div>
</div>
<!-- /Boxes de Acoes -->
</div>
</div>
<div class="container night">
<div class="page-header" style="text-align:center;" id="section-3">
<h2>
Our Process
</h2>
<h3>
</h3>
</div>
<ul class="timeline">
<li class="timeline">
<div class="timeline-badge mybadge">
<i class="glyphicon glyphicon-search">
</i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">
Planning
</h4>
</div>
<div class="timeline-body">
<p>
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge mybadge">
<i class="glyphicon glyphicon-th-list">
</i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">
Content
</h4>
</div>
<div class="timeline-body">
<p>
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</p>
<p>
Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, vehicula ac nisi. Aenean vel dui dui. Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut scelerisque neque et turpis posuere pulvinar pellentesque nibh ullamcorper. Pharetra in mattis molestie, volutpat elementum justo. Aenean ut ante turpis. Pellentesque laoreet mé vel lectus scelerisque interdum cursus velit auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac mauris lectus, non scelerisque augue. Aenean justo massa.
</p>
</div>
</div>
</li>
<li class="timeline">
<div class="timeline-badge mybadge">
<i class="glyphicon glyphicon-pencil">
</i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">
Design
</h4>
</div>
<div class="timeline-body">
<p>
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge mybadge">
<i class="glyphicon glyphicon-wrench">
</i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">
Development
</h4>
</div>
<div class="timeline-body">
<p>
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</p>
<hr>
</div>
</div>
</li>
<li class="timeline">
<div class="timeline-badge mybadge">
<i class="glyphicon glyphicon-cloud-upload">
</i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">
Test & Launch
</h4>
</div>
<div class="timeline-body">
<p>
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="container day">
<hr>
<h3 class="center" id="section-4">
Our Work
</h3>
<hr>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 myimg">
<img src="../images/after-searok.jpg" class="img-responsive">
<blockquote class="blockquote">
<footer>
<cite title="Source Title">
Searok Charters
</cite>
</footer>
</blockquote>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 myimg">
<img src="../images/after-nicor.jpg" class="img-responsive">
<blockquote class="blockquote">
<footer>
<cite title="Source Title">
Nicor
</cite>
</footer>
</blockquote>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 myimg">
<img src="../images/after-cmt.jpg" class="img-responsive">
<blockquote class="blockquote">
<footer>
<cite title="Source Title">
Castle Mountain Team
</cite>
</footer>
</blockquote>
</div>
<hr>
</div>
</div>
<hr>
<div class="container" style="text-align:center;">
<div class="col-xs-3">
<i class="fa fa-5x fa-arrow-right">
</i>
</div>
<div class="col-xs-6">
<h2 class="center">
<button type="button" class="btn btn-primary btn-lg btn-block">
All my our work
</button>
</div>
<div class="col-xs-3">
<i class="fa fa-5x fa-arrow-left">
</i>
</div>
</h2>
</div>
<footer style="text-align:center;">
<div class="container night nopad">
<hr>
<h3 class="center" id="section-5">
Let's talk about your project!
</h3>
<hr>
<div class="col-lg-4 col-xs-12">
<hr>
<h2>
<a href="tel:4073497036">
<i class="fa fa-phone">
</i>
(407) 349-7036
</a>
</h2>
<hr>
</div>
<div class="col-lg-4 col-xs-12 nopad" style="text-align:center;">
<!-- Place this tag where you want the widget to render. -->
<div class="g-page" data-width="200" data-href="//plus.google.com/u/0/106333335696092351517" data-theme="dark" data-rel="publisher">
</div>
<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div class="col-lg-4 col-xs-12">
<hr>
<h2>
<a href="mailto:rob@dnwebdev.com">
<i class="fa fa-envelope-o">
</i>
rob@dnwebdev.com
</a>
</h2>
<hr>
</div>
<div id="footer" class="day" style="text-align:center;">
<div class="col-lg-12 col-xs-12">
<p>
Day & Night Web Solutions, LLC
</p>
</div>
</div>
</div>
</footer>
<script>
function close_toggle() {
if ($(window).width() <= 768) {
$('.nav a').on('click', function () {
$(".navbar-toggle").click();
});
} else {
$('.nav a').off('click');
}
}
close_toggle();
$(window).resize(close_toggle);
//function that offsets scoll
if ($(window).width() <= 768) {
var offset = 100;
} else {
var offset = 115;
}
$('.navbar li a').click(function (event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
});
</script>
</body>
</html>
最佳答案
您有一个 jQuery 函数，它强制每个菜单链接滚动到该部分。您需要告诉函数对除FAQ 之外的所有菜单链接执行此操作，并在点击FAQ 时重定向，因此您可以:
//trim the spaces and check if the text of the menu link is not equal to 'FAQ'
if ($.trim($(this).html()) != 'FAQ') {
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
} else {
//if it is, redirect to the page
window.location.href = $(this).attr('href');
}
Full Screen ( jsfiddle )
来自评论:
when trying to link back I am using ""; which is throwing off the scrollspy by adding #section-2 to the url.
这很难解决，因为我们可以在页面重定向上使用的功能有限。但是，您可以这样做:
首先，去掉这个函数$('.navbar li a').click(function(event) {完全，并将此代码放在其他脚本之上:
$("document").ready(function() {
$(document).on('click','.navbar li a',function(event) {
alert($(this).html());
event.preventDefault();
if($.trim($(this).html())!='FAQ'){
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
}
else
{
window.location.href = $(this).attr('href');
}
});
//document.referrer returns the url from which this page has been entered,
//we will use this to check if we are redirected from FAQs page
var previous_url = document.referrer;
if(previous_url=='http://dnwebdev.com/dev/faq/'){
//if we were redirected from FAQ page, we would have a #section-value in our url
//hash here fetched that value
var hash = document.URL.substr(document.URL.indexOf('#')+1);
//this is the important part, we are gonna trigger that the
//#section-value passed in url is _clicked_. And so the browser will
//scroll down to that section
$('.navbar li a#a-'+hash).trigger('click');
//once it scrolls down, this deletes the #section-value from url
history.pushState('', document.title, window.location.pathname);
}
});
为了上面的工作，你还需要添加一个 id属性到你的每一个 <a>标签如:
<a href="#section-1" id="a-section-1">
<a href="#section-2" id="a-section-2">
等等
关于如何 trigger 的一个小演示作品:demo
关于javascript - scrollspy 导航到不同的页面并返回同一位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23506975/
26
4
0
我正在尝试获取从过去的 startposition/location 到当前移动的 currentposition/location 的距离(以米为单位)。 我确实有工作正常的currentposit
所以我有一堆绝对覆盖的 div。用户通过在叠加层上拖动来创建方形 div。如果您要创建一个 div，然后放大和缩小，div 会保持在同一位置，因为它对叠加层是绝对的，如前所述。 然而问题就出在这里。您
我想找到 View 在显示屏幕上的位置。 为此，我使用了 view.getLeft() 、view.getBottom() 、view.getRight() 等方法> , view.getTop()。
我有一个看起来像这样的 View 层次结构(基于其他答案和 Apple 的使用 UIScrollView 的高级 AutoLayout 指南): ScrollView 所需的2 个步骤是: 为 Scr
所以我有一个名为 MARKS 的表，我有这些列 STUDENT_ID, CLASSFORM_NAME, ACADEMIC_YEAR, TERM, SUBJECT_NAME, TOTAL_MARKS
我有一个问题我无法理解，请帮助: 我开发了带有图像的 html 页面，并使用 jQuery UI 帮助使它们可拖动，我将这些图像位置设置为相对位置并给出了左侧和顶部像素，这是页面的链接 http://
我正在尝试创建一个 CSS 动画，它在 sprite 表中循环播放 16 个图像，给人一种幽灵“漂浮”的错觉。动画通过在 background-position 位置之间移动以显示不同状态的幽灵来实现
我正在创建这个网站的 WebView https://nearxt.com/打开时询问位置但是当我使用此链接在 flutter 中创建 webview 时那么它就无法定位我还在应用程序中定义了位置，但
我正在以编程方式创建一个需要跨越 2 个屏幕的窗口。正在创建的窗口的大小是正确的，但窗口大约从第一个屏幕的一半开始。我可以将它拖回第一个屏幕的开头，NSWindow 非常适合。 我只需要知道在窗口的起
位置“/”的匹配叶路由没有元素。这意味着默认情况下它将呈现一个空值，从而导致一个“空”页面 //App.js File import { BrowserRouter as Router, Routes
我有一个运行 Ubuntu 和 Apache 的 VPS 例如，假设地址是:5.5.5.5 在 VPS 上，我有一个名为 eggdrop 的用户(除了我的 root 用户)。 用户 eggdrop 有
我有一个 JLabel与 ImageIcon ，我使用 setIcon() JLabel中的函数. ImageIcon然后上来，坐在我的JLabel 的文字左侧.是否有可能拥有 ImageIcon在文
我的图中有节点，它们的 xlabels 位于它们的左上方。我怎样才能改变这个位置？我希望 xlabels 正好位于节点本身的旁边。 最佳答案 xlp是你想要的属性，但它没有做任何事情。 你不能改变位置
我对基本的 VIM 功能有疑问:(我尝试谷歌搜索但找不到答案) 如何列出所有自定义功能。(我做了 :function 并且不能找到我的自定义函数) 如何获得自定义函数列表中的函数(或它们的存储位置)。
我是 PHP 的新手，虽然我一直在搜索，但我不知道该怎么做。 我知道可以使用 Location("some page") 进行重定向。我还读到，只要没有向用户显示任何内容，它就可以工作。 我想做的是:
如果在 jgrowl.css 中位置更改为“center”，我如何将其覆盖为默认值，即“top-right” $.jGrowl(data, { header: 'data', an
我需要根据用户是否滑动屏幕顶部、屏幕中间或屏幕底部来触发不同的事件。我正在尝试找出最好/最简单的方法来做到这一点，因为我很确定没有办法从 UISwipeGestureRecognizer 获取位置。
我需要枚举用delphi编写的外部应用程序中使用的类 ，因此我需要访问VMT表以获取该信息，但是我找不到任何有关如何在exe（由delphi生成）文件中找到VMT（虚拟方法表）的位置（地址）的文档。
在 D2010 (unicode) 中是否有像 Pos 这样不区分大小写的类似函数？ 我知道我可以使用 Pos(AnsiUpperCase(FindString), AnsiUpperCase(Sou
我正在尝试为我的reveal.js 演示文稿制作一个标题，该标题会粘贴在屏幕顶部。标题中的内容在每张幻灯片的基础上都是动态的，因此我必须将标记放在 section 标记中。 显然，如果标记在 sect
我是一名优秀的程序员,十分优秀！