10
0
mirror of https://github.com/LCPQ/QUESTDB_website.git synced 2024-12-25 13:53:48 +01:00

Adjust sticky table head relative to navigation bar

This commit is contained in:
Mickaël Véril 2020-02-03 14:26:11 +01:00
parent 3cc3911821
commit 0986785a0f
2 changed files with 11 additions and 4 deletions

View File

@ -26,7 +26,13 @@ draft: false
<script src="https://cdn.jsdelivr.net/npm/bowser@2.5.3/es5.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bowser@2.5.3/es5.min.js"></script>
<script src="/js/floatUtils.js"></script> <script src="/js/floatUtils.js"></script>
<script> <script>
function adjustSticky(){
const height=$("nav").height()
$("thead.sticky > tr > th ").css("top",height)
}
window.onload = async () => { window.onload = async () => {
adjustSticky();
$(window).resize(adjustSticky)
window.browser=bowser.getParser(window.navigator.userAgent); window.browser=bowser.getParser(window.navigator.userAgent);
const LatexInline = ['\\(', '\\)'] const LatexInline = ['\\(', '\\)']
var slist = $("#SelectList") var slist = $("#SelectList")
@ -361,10 +367,11 @@ draft: false
$("<h1/>").text(sets.get(doi)).appendTo(div) $("<h1/>").text(sets.get(doi)).appendTo(div)
var table = $("<table/>").addClass("datatable").appendTo(div) var table = $("<table/>").addClass("datatable").appendTo(div)
var head = $("<tr/>") var head = $("<tr/>")
$("<thead/>").append(head).appendTo(table) $("<thead/>").addClass("sticky").append(head).appendTo(table)
var tbody = $("<tbody/>").appendTo(table) var tbody = $("<tbody/>").appendTo(table)
head.append(["Molecule", "Transition"].map(x => $("<th/>").text(x))) head.append(["Molecule", "Transition"].map(x => $("<th/>").text(x)))
head.append(sortedMethods.map(x => $("<th/>").text(x.toString()))) head.append(sortedMethods.map(x => $("<th/>").text(x.toString())))
adjustSticky();
datadic = new Map() datadic = new Map()
for (const dat of paperdata) { for (const dat of paperdata) {
const key1 = dat.molecule; const key1 = dat.molecule;
@ -547,7 +554,7 @@ draft: false
</section> </section>
<section> <section>
<table id="stat_table" class="datatable"> <table id="stat_table" class="datatable">
<thead> <thead class="sticky">
<th>Method</th> <th>Method</th>
<th>Set</th> <th>Set</th>
<th>Min</th> <th>Min</th>

View File

@ -4,10 +4,10 @@ table.datatable > tbody > tr > td {
td.NumberCell { td.NumberCell {
text-align: center; text-align: center;
} }
table > thead tr > th { thead.sticky > tr > th {
position: sticky; position: sticky;
position: -webkit-sticky; position: -webkit-sticky;
top: 150px; top: 0px;
margin: 0 auto; margin: 0 auto;
z-index: 10; z-index: 10;
background-color: white; background-color: white;