滚动时保持页眉固定在顶部

2022-01-28 05:58:15 标签 htmlcss

我希望保持突出显示的元素固定在页面顶部,防止与文本重叠时滚动下方。

https://read。themethodsection。com/ideas。html

有什么我可以添加到“custom-msmbstyle。css”实现这种效果吗?

html:


<!DOCTYPE html>
<html lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content="2 Developing Research Ideas | Global Health Research: Designs and Methods" />
<meta property="og:type" content="book" />
<meta property="og:url" content="http://themethodsection.com/ebook/" />
<meta property="og:image" content="http://themethodsection.com/ebook/images/cover.jpg" />
<meta property="og:description" content="Online textbook about global health research methods" />
<meta name="author" content="Eric P. Green" />
<meta name="date" content="2020-08-09" />
<meta name="description" content="Online textbook about global health research methods">
<title>2 Developing Research Ideas | Global Health Research: Designs and Methods</title>
<link href="libs/tufte-css-2015.12.29/tufte.css" rel="stylesheet" />
<link href="libs/tufte-css-2015.12.29/envisioned.css" rel="stylesheet" />
<link href="libs/msmb-css-0/msmb.css" rel="stylesheet" />
<script>
function toggle_visibility(id1, id2) {
var e = document.getElementById(id1);
var f = document.getElementById(id2);
e.style.display = ((e.style.display!='none') ? 'none' : 'block');
if(f.classList.contains('fa-plus-square')) {
    f.classList.add('fa-minus-square')
    f.classList.remove('fa-plus-square')
} else {
    f.classList.add('fa-plus-square')
    f.classList.remove('fa-minus-square')
}
}
</script>
<script src="libs/kePrint-0.0.1/kePrint.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-10766227-12"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-10766227-12');
</script>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="center.css" type="text/css" />
<link rel="stylesheet" href="custom-msmbstyle.css" type="text/css" />
</head>
<body>
<div class="row">
<div class="col-sm-12">
<div id="TOC">
<ul class="navbar">
<li class="msmb"><p class="title">Global Health Research: Designs and Methods<p><p class="author">Eric P. Green</p>
<li class="dropdown" style="float:right">
<a href="javascript:void(0)" class="dropbtn">&#x25BE; Chapters</a>
<div class="dropdown-content">
<a href="index.html">Welcome</a>
<a href="contents.html">Contents</a>
<a href="preface.html">Preface</a>
<a href="acknowledgements.html">Acknowledgements</a>
<a href="introduction.html">Introduction</a>
<a href="module-1-getting-started-with-global-health-research.html">MODULE 1 Getting Started With Global Health Research</a>
<a href="ghr.html"><span class="toc-section-number">1</span> Global Health Research</a>
<a id="active-page" href="ideas.html"><span class="toc-section-number">2</span> Developing Research Ideas</a><ul class="toc-sections">
<li class="toc"><a href="#finding-a-research-problem"> Finding a Research Problem</a></li>
<li class="toc"><a href="#searching-the-literature"> Searching the Literature</a></li>
<li class="toc"><a href="#the-takeaway-2"> The Takeaway</a></li>
</ul>
<a href="filtered.html"><span class="toc-section-number">3</span> Systematic Reviews and Meta-Analyses</a>
<a href="critical.html"><span class="toc-section-number">4</span> Critical Appraisal</a>
<a href="module-2-define-your-study-aims.html">MODULE 2 Define Your Study Aims</a>
<a href="aims.html"><span class="toc-section-number">5</span> Research Questions and Aims</a>
<a href="theory.html"><span class="toc-section-number">6</span> The Role of Theory in Global Health</a>
<a href="measurement.html"><span class="toc-section-number">7</span> Outcomes and Indicators</a>
<a href="module-3-understand-inference.html">MODULE 3 Understand Inference</a>
<a href="statisticalinference.html"><span class="toc-section-number">8</span> Statistical Inference</a>
<a href="references.html"><span class="toc-section-number">9</span> References</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><div id="ideas" class="section level1">
<h1>
<span class="header-section-number">2</span> Developing Research Ideas</h1>
<p><label for="tufte-mn-25" class="margin-toggle">⊕</label><input type="checkbox" id="tufte-mn-25" class="margin-toggle"><span class="marginnote"><iframe src="https://giphy.com/embed/p9bj7nrUPAypq" width="250" height="250" frameborder="0" class="giphy-embed" allowfullscreen>
</iframe>
<span style="display: block;">
Actual footage of my first research meeting in grad school, <a href="https://giphy.com/gifs/muppets-p9bj7nrUPAypq">via GIPHY.</a>
</span></span></p>
<p>In my experience as a former student and as a mentor, one of the most anxiety-producing moments in student life is when a new mentor says, “tell me about your ideas”. Why is this innocent prompt so terrifying? It might be because we have the wrong understanding of innovation and the origin of good ideas.</p>
<p>
<span class="marginnote shownote">
<!--
<div class="figure">--><span id="fig:goodideas"></span>
<img src="images/wheregoodideas.jpg" alt="[*Where Good Ideas Come From*](https://amzn.to/2Xg3pNi), by Steven Johnson. Also see his book, [*Ghost Map*](https://amzn.to/2DdExOu), a retelling of the story of John Snow and the 1854 outbreak of cholera in London."><!--
<p class="caption marginnote">-->Figure 2.1: <a href="https://amzn.to/2Xg3pNi"><em>Where Good Ideas Come From</em></a>, by Steven Johnson. Also see his book, <a href="https://amzn.to/2DdExOu"><em>Ghost Map</em></a>, a retelling of the story of John Snow and the 1854 outbreak of cholera in London.<!--</p>-->
<!--</div>--></span>
</p>
<p>In his book <em>Where Do Good Ideas Come From?</em>, Steven Johnson argues that good ideas are usually not eureka moments as we tend to imagine. Instead, good ideas are often the product of fertile environments where ideas are allowed to “connect, fuse, and recombine” over time. Have a listen.</p>
<iframe width="690" height="388" src="https://www.youtube.com/embed/NugRZGDbPFU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
<p><br></p>
<p>I think two of Johnson’s insights are particularly relevant for us: the notion of the <em>slow hunch</em> and the <em>adjacent possible</em>. These concepts help to explain why generating research ideas can be so hard for students.</p>
...
</body>
</html>

css:

/* Hide msmbstyle's built-in header */
ul.navbar {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
  padding: 0;
}
.navbar .msmb {
  padding: 0;
}
.title {
  display: none;
}
.author {
  display: none;
}
.build-date {
  display: none;
}
/* GHRD&G Logo */
.msmb:after {
  padding: 1em 0 1em 0;
  float: left;
  content: url(images/logo.png);
}
/* align the dropdown for chapters */
#TOC {
  max-width: 55%;
}
.navbar .dropdown .dropbtn {
  vertical-align: top;
  color: #222;
}
.dropdown-content {
  right: unset;
}

# # #你可以使用position:sticky top:0top:0 把它固定在顶部。

试试这个风格:

.stickyNavbar{
    position: sticky;
    top: 0;
    z-index: 9999;
    background: white;
}

###试试这个,我经常使用这个横幅。您所要做的就是更改并删除下面代码中不需要的部分。这使用了flex-box,所以它将与窗口包装。

HTML
<div id="banner">
CSS
#banner {
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    max-height: 30px;
    z-index: 100;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    flex-flow: row;
    align-content: center;
    justify-content: center;
}

###你可以设置顶部的位置为固定的(position: fixed) and the margin top of the bottom part to be equal to th)和底部部分的顶部边缘与顶部部分的高度相等。

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码