- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在尝试将 Bootstrap 3 模板“升级”到 Bootstrap 4。关注 Smooth scrolling when clicking an anchor link ,我将 jQuery.animate()
中的 scrollTop
属性设置为
$($.attr(this, 'href')).offset().top
但是,这似乎让它滚动到链接本身的顶部,而我希望它滚动到链接中标题的顶部:
而我希望它滚动到包含 div 的顶部:
我基本上想额外向下滚动 60px,因为 div 的填充是 60px - 理想情况下,使数量适应该填充。我怎样才能做到这一点?
这是一个片段:
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 300);
});
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
/*color: #818181;*/
color: #181818;
}
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
.jumbotron {
background-image: url("../img/Patagonia_Sirona_crop3.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center bottom;
/*background-color: #050042;*/
color: #fff;
padding: 70px 25px;
font-family: Montserrat, sans-serif;
}
.container-fluid {
padding: 60px 50px;
}
.bg-grey {
background-color: #f6f6f6;
}
.logo-small {
color: #050042;
font-size: 50px;
}
.logo {
color: #050042;
font-size: 200px;
}
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
.carousel-control.right, .carousel-control.left {
background-image: none;
color: #050042;
}
.carousel-indicators li {
border-color: #050042;
}
.carousel-indicators li.active {
background-color: #050042;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item span {
font-style: normal;
}
.panel {
border: 1px solid #050042;
border-radius:0 !important;
transition: box-shadow 0.5s;
}
.panel:hover {
box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}
.panel-footer .btn:hover {
border: 1px solid #050042;
background-color: #fff !important;
color: #050042;
}
.panel-heading {
color: #fff !important;
background-color: #050042 !important;
/*padding: 25px;*/
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer {
background-color: white !important;
}
.panel-footer h3 {
font-size: 32px;
}
.panel-footer h4 {
color: #aaa;
font-size: 14px;
}
.panel-footer .btn {
margin: 15px 0;
background-color: #050042;
color: #fff;
}
.navbar {
/* margin-bottom: 0; */
/* z-index: 9999; */
/* border: 0; */
/* font-size: 12px !important; */
/* line-height: 1.42857143 !important; */
/* letter-spacing: 4px; */
/* border-radius: 0; */
font-family: Montserrat, sans-serif;
}
/* .navbar li a, .navbar .navbar-brand {
color: #fff !important;
} */
/* .navbar-nav li a:hover, .navbar-nav li.active a {
color: #050042 !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
} */
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
color: #050042;
}
.slideanim {visibility:hidden;}
.slide {
animation-name: slide;
-webkit-animation-name: slide;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
}
@keyframes slide {
0% {
opacity: 0;
transform: translateY(70%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.btn-lg {
width: 100%;
margin-bottom: 35px;
}
}
@media screen and (max-width: 480px) {
.logo {
font-size: 150px;
}
}
#accordion {text-align: left};
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>Peek Solutions</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="stylesheets/peek-solutions.css">
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark justify-content-between">
<a class="navbar-brand" href="#">Peek Solutions</a>
<div class="navbar-nav justify-content-end">
<a class="nav-item nav-link" href="#about">About</a>
<a class="nav-item nav-link" href="#services">Services</a>
<a class="nav-item nav-link" href="#contact">Contact</a>
</div>
</nav>
<div class="jumbotron text-center">
<h1>Peek Solutions</h1>
<p>Pipeline integrity solutions for the energy industry</p>
</div>
<!-- Container (About Section) -->
<div id="about" class="container-fluid">
<div class="row">
<div class="col-sm-7">
<h2>About us</h2><br>
<!-- <img src="img/ZRB_buckle_trigger_resized_30_percent.jpg" style="float:right"></img>-->
<h4>Peek Solutions, an independent consulting company founded by Ralf Peek, provides pipeline integrity solutions and assurance support to the energy industry, including the application of structural reliability methods to assess and ensure integrity.</h4><br>
<br>
<!-- <button class="btn btn-default btn-lg">Get in Touch</button> -->
<a href="#contact" class="btn btn-default btn-lg" role="button">Get in touch</a>
</div>
<div class="col-sm-5">
<img src="img/ZRB_buckle_trigger_resized_30_percent.jpg" style="width:100%"></img><br>
A zero-radius bend (ZRB) trigger that was installed for Sarawak Shell Berhad's B12 pipeline. (From <a href="http://ascelibrary.org/doi/abs/10.1061/%28ASCE%29TE.1943-5436.0000076">Peek & Kristiansen (2009)</a>).
</div>
</div>
</div>
<!-- Container (Services Section) -->
<div id="services" class="container-fluid text-center bg-grey">
<h2>SERVICES</h2>
<h4>Our services include:</h4>
<br>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Pipeline Integrity Assessment and Design</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Our services include the design and assessment of subsea pipelines for lateral and/or upheaval buckling, arctic pipelines subject to ice gouging, stamukha loadings and/or thaw settlements, and pipelines crossing active faults, as well as more routine design and assessment.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Structural Reliability Assessment (SRA)</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p>Ralf Peek has over 30 years of experience in the area of structural reliability assessment and the estimation and assessment of uncertainties affecting structural performance in order to ensure that safety margins are adequate to cover such uncertainties. His specific experience includes:
<ul>
<li>Reliability-based design of buried arctic subsea pipeline against loading by ice keels gouging the sea floor</li>
<li>SRA for pipelines subject to lateral buckling under thermal expansion</li>
<li>Operating pipelines subject to extreme conditions (for example, turbidity current loading)</li>
<li>Probabilistic response-based seismic loading assessment criteria</li>
<li>Nuclear containment structural reliability assessment</li>
</ul>
<p>Peek Solutions can also coordinate and deliver Quantitative Risk Assessment (QRA), where necessary arranging for inputs on hydrocarbon release modeling from others. (QRA includes assessment of the consequences of failure as well as the probability of occurrence, and typically involves integration of multidisciplinary inputs, as well as inputs based on local knowledge into a model).
</p>
<p>Reasons to perform a Structural Reliability Analysis (SRA) or Quantitative Risk Assessment (QRA) could include:</p>
<ul>
<li>Extreme loadings are encountered such as ice, or geohazard loadings for which there are no established design methods and criteria.</li>
<li>Operating conditions (e.g. wet, sour service) can strongly affect the deformation capacity of the pipe.</li>
<li>Consequences of failure could be exceptionally severe.</li>
<li>New technology or a new concept is being used for which there is limited experience, and ingredient uncertainties affecting the performance are different from those for standard technology.</li>
<li>Where new, more reliable technology, inspection or assessment methods are used whereby uncertainties are reduced, and an adjustment in the required safety margins could be justified.</li>
<li>Value of information analysis under uncertainty in essence consists of performing SRA or QRA with and without the information so that the value of the information can be assessed. Such “information” might consist for instance of a (full scale) testing program, or other investigations to reduce uncertainties.</li>
<li>The loading for a pipeline is somewhere in between load- and displacement-controlled, so that existing criteria for either of these cases is not directly applicable, and a case-specific calibration of the required safety margins is needed.</li>
</ul>
<p>SRA and/or QRA ties together a number of aspects of design, specifications, fabrication and installation methods, monitoring, inspection and maintenance, and contingency response procedures, as all have a bearing on reliability. To include all these aspects properly typically requires a muti-disciplinary team, with expertise that typically cannot be found within a single company. Peek Solutions will assemble and engage such a team (e.g. by subcontracts), drawing from a network of specialists, as well as drawing from customer’s expertise, practices and procedures.</p>
<p>In SRA’s statistical data are used to quantify uncertainties. However, in most cases there are important uncertainties for which statistical data are not available. Indeed, these dominate more often than not. Ignoring such uncertainties, or making the SRA conditional upon certain assumptions about such uncertainties can be dangerous. Therefore, Peek Solutions will assess all uncertainties, rather than only the ones for which statistical data are available, and quantify them by informed engineering judgment, engaging specialized external experts as appropriate.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Pipeline Design or Operational Integrity Review, Assurance and/or Specification</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<p>Despite the guidance available from design codes, the design process relies significantly on engineering judgment to define suitable analysis methods, and the associated assumptions, and approximations. Such judgments should be based on a knowledge of the conditions for which the safety margins in the design code have been calibrated, and how there may or may not differ from the conditions for the design under consideration. Safe and economical design requires not only state-of-the-art or beyond analysis methods, but also an understanding of differences between model and real behavior, their impact, and safety margins needed to cover the associated uncertainties. Peek Solutions can help to assure that such issues have been adequately addressed for pipeline designs where special challenges are involved.</p>
<p>Design reviews can sometimes raise issues at a time when this can have a deleterious effect on project schedules. A better alternative can be to develop a robust design approach from the onset. This can be done by engaging design review at the early stages, or even by developing a Design Specification prior to FEED (Front End Engineering Design) or detailed design.</p>
<p>The Design Specification includes design code interpretation (if applicable), analysis methods, and assumptions and approximations to be made, together with a pertinent example to illustrate these. Further it can include any testing programs, e.g. in the form of additional welding procedure qualification requirements to assure girth weld integrity under strain-based design conditions, or special in situ tests to reduce uncertainty associated with pipe-soil interaction. Where necessary the safety margins in the Design Specification are calibrated based on structural reliability assessment to ensure that a specified target reliability level is achieved.</p>
<p>In addition to design, Peek Solutions supports installation (where this can affect performance), and specification and interpretation of as-built and/or as-laid surveys.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Concept Definition and Assessment</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<p>In some cases it may be expedient to perform quick evaluations of a number of concepts in order to focus on the most promising ones, or check the feasibility of an innovative one which could deliver considerable life-cycle savings, but for which there is limited or no experience. Peek Solutions can help in this process to conceive, identify, and/or assess innovative concepts. For instance, inventions by Ralf Peek include:
<ul>
<li>The Zero-Radius Bend (ZRB) method to reliably trigger lateral buckles in order to safely accommodate thermal expansion. This method has been successfully adopted for a number of high-temperature subsea pipelines for Sarawak Shell and others. According to a review of methods to trigger buckles for controlled thermal expansion by the <a href="http://safebuck.com/">Safebuck JIP</a>, this ZRB is the only one with 100% success in triggering the buckles as intended.</li>
<li>The Pipe-Clamping Mattress (PCM) to stop pipeline walking (cf. <a href="https://www.onepetro.org/conference-paper/OTC-27815-MS>">Frankenmolen et al. (2017)</a>). This provides an effective alternative to rock dump to restrain a pipeline axially, so that it will not creep like a worm under cyclic thermal expansion and contraction, thereby threatening the integrity of end connections.</li>
</ul>
</p>
<p>To make innovation feasible, it needs to be assessed at an early stage. Peek Solutions can help by developing and assessing a feasibility-basis design at a level of detail that is sufficient to expose any devil that may be hiding in the details.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Research and Development</a>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
<p>Peek Solutions’ ambition is to contribute to improved understanding and modeling for pipeline integrity assurance, not only by its own R&D efforts, but also by being at the interface between academic research and applications to the industry, in order to make better use of academic research, but also to influence academic research programs towards matters relevant to pipeline integrity.</p>
<p>Structural Reliability Assessment (SRA) provides an excellent framework to capture and quantify improved knowledge from R&D programs in terms of reduced uncertainty. The economic benefit this generates can then be assessed by a Value of Information Analysis (VIA). Conversely, SRA and VIA can also point to areas where R&D is most fruitful.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Specialized Software Development</a>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<p>Ralf Peek has experience with code development and application for Finite Element Analysis, having developed the NPEX code while at the University of Michigan, and further developed it at Shell as a workhorse for pipeline upheaval and lateral buckling analysis. Using NPEX as a starting point, Peek Solutions can efficiently develop codes for specific applications, such as lateral buckling analysis, buried pipeline subject to ice loading or offset at a fault (with the soil modeled by springs), or calculation of pipe deformation capacity without local buckling.</p>
<p>Experience also includes the development of a material subroutine, VUMAT, for ABAQUS/Explicit to model undrained or drained saturated soil behavior during ice gouging over a buried pipeline.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Container (Contact Section) -->
<div id="contact" class="container-fluid">
<h2 class="text-center">CONTACT</h2>
<div class="row">
<div class="col-sm-5">
<p>Contact us and we'll get back to you as soon as possible.</p>
<p><span class="glyphicon glyphicon-map-marker"></span> Av. St. Andreu 116, 08392 St. Andreu de Llavaneres, Spain</p>
<!-- <p><span class="glyphicon glyphicon-phone"></span> +31 624272619</p> -->
<p><span class="glyphicon glyphicon-earphone"></span> +34 937927406</p>
<p><span class="glyphicon glyphicon-envelope"></span> <a href=mailto:ralf@peek.solutions>ralf@peek.solutions</a></p>
</div>
<form id="contactform" action="//formspree.io/ralf@peek.solutions" method="POST">
<div class="col-sm-7 slideanim">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="_replyto" placeholder="Email" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="message" placeholder="Message" rows="5"></textarea><br>
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right" type="submit">Send</button>
</div>
</div>
</div>
<input type="hidden" name="_next" value="//peek.solutions/confirmation.html" />
<input type="text" name="_gotcha" style="display:none" />
</form>
</div>
</div>
<div id="googleMap" style="height:400px;width:100%;"></div>
<!-- Add Google Maps -->
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBimnrhiugaGSNN8WnsjpzMNJcrH_T60GI"></script>
<script src="js/google-map.js"></script>
<footer class="container-fluid text-center">
<a href="#myPage" title="To Top">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<!-- <p>Bootstrap Theme Made By <a href="http://www.w3schools.com" title="Visit w3schools">www.w3schools.com</a></p> -->
</footer>
<!-- <script src="js/scroll.js"></script> -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
最佳答案
假设您链接到的页面的所有部分的内边距都相同并且将保持该大小,您只需添加“- 60”即可。
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top - 60 //Add this
}, 300);
});
关于javascript - 如何将 scrollTop 设置为包含 jQuery.animate() 链接的 div 的顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51015786/
我有一个 div(我认为是容器?)我希望它成为中心页面。 Billede 2 我只想让所有上下文都位于页面中心,这怎么可能? 最佳答案 Billede 2 根据您的要求
我只是在研究 jQuery,偶然发现了 Find 函数。 我是这样测试的: $(document).ready(function(){ $('button').click(function()
如何制定一个规则来做这样的事情: .container .unit:first-child(if it has inside div.box1.extra) + .box2 { top: 50px;}
我想了解为什么浏览器显示 和 的方式不同? 这是一个示例:片段 #1 的预期输出是三个并排的框:[黑色]、[蓝色]、[红色]。代码段 #2 仅显示 [black] 和 [red] - 为什么代码段 #
我有一个奇怪的问题,我无法使用正常的嘶嘶声选择器来正确选择 jQuery 中的某些内容: 这两行代码不做同样的事情。 ele.children("div.a > div").addClass("bad
我有一个包含另外两个 div 的 div first div second div 父 div 有最大高度,因此不能增长超过一定数量。但是两个子 div 可以有任何大小(动态
我在两个 div 之间有问题。 div#mainbody 是父 div 有一个背景,div 2 子 div 有自己的背景所以 div 2 浮出父级 div 但我希望它位于父级 div 中。 HTML:
我在另一个具有特定宽度的 div 中有一个 div,但我希望子 div 的宽度与浏览器屏幕大小成百分比而不是与其父 div 的百分比,这意味着当我将子 div 的宽度设置为 50% 时,我希望它的大小
我有以下代码。当单击 div 1 中的按钮时,我需要隐藏 div 1 并显示 div2。 (在 Angular HTML5 中)。我有一个带有 Controller 等的 JS 文件,目前我有两个不同
现在我可以将容器 div 的大小自动调整到内部 div,或者我可以将整个东西居中...但我不知道如何同时进行这两项操作。 下面是我拥有的 CSS/布局。现在 page 和 main 元素都居中,但如果
当一个单元格 div 包含绝对定位的 div 时,如何在表格 div 中顶部对齐两个单元格 div? 在此示例中,不包含绝对定位的 div 的单元格 div 被下推。 HTML: 1
我的程序是一个游戏,从 4 个可玩 Angular 色开始,每个 Angular 色都在自己的类 charContainer 中,这 4 个 div 位于类 character 的容器中。当玩家通过点
我有这样的东西: 现在,#page 中没有任何格式。它适用于一些内容,我的意思是,当内容更大时,#page 也有更高的高度。但是,当今天我在其中应用 #con
我有一个 React 应用程序,并且在一些 CSS 方面遇到了一个稍微大一点的问题。 我有一个 View 分为两部分。但这两个部分位于一个更大的组件中。左侧部分显示一些联系人,右侧我想显示这些联系人的
我想像 facebook 注册页面一样,一个div1(section width:1024px)有四个div,左边div2(width:50%) 有div3(fb slogan),下面div4(con
在我的网页上遇到一个问题,母版页中的页脚对于某个特定页面没有正确显示。在那个页面上,我有一个 在底部。 在我的头上敲了一会儿之后,我发现要让页脚正确显示,我需要做的就是将该行更改为: 我不明白为什么
我正在使用 this plugin用于跨浏览器兼容的灰度图像。基本上,图像最初处于低不透明度的灰度模式。当用户将鼠标悬停在图像上时,灰度逐渐变为彩色,不透明度返回到 1,之前隐藏的 div 从底部向上
这是一个 jsfiddle link of my issue HTML 8.123456 huh-fjiuetie 条件是: h
当前面的 div 中的文本溢出时,如何防止后面的内联 div 换行显示。 如您所见,对于第一个帖子,主要内容换行到第二行,因此它后面的链接显示在新行上(这是不正确的)。 但是对于第 3 篇文章,主标题
我有一个 div,当它悬停在上面时,它会激活另一个 div。当用户将鼠标移动到激活的 div 上时,我希望该 div 保留下来。这是一个片段。 当您将鼠标悬停在金色框上时,紫色框会隐藏并显示灰色框。当
我是一名优秀的程序员,十分优秀!