html - 滚动时将页眉固定在顶部

问题描述

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

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">⊕&lt;/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;
}

标签： htmlcss

html - 滚动时将页眉固定在顶部

问题描述

解决方案

推荐阅读