Make table header fixed when scrolling
I am using Bootstrap V4 alpha 6 along with Angular 5 to create a table with a fixed header when scrolling. However, I can\'t seem to get it to work
-
The easiest way to achieve this is to create your own JavaScript function to manipulate the behavior as required. Play around with the following snippet code to meet your expectations.
document.onscroll = function() { var scroll = $(window).scrollTop(); if (scroll >= 50) { $("thead").css({ "position": "fixed", "top": "0px" }); $("th").css({"padding":"15px 66px", "margin":"auto"}); } else { $("thead").css({ "position": "relative", "top": "0px" }); } };Full Name Gender Country Sam Tomashi Male D.R.Congo Molly Akinyi Female Kenya John Doe Male France Sam Tomashi Male D.R.Congo Molly Akinyi Female Kenya John Doe Male France Sam Tomashi Male D.R.Congo Molly Akinyi Female Kenya John Doe Male France Sam Tomashi Male D.R.Congo Molly Akinyi Female Kenya John Doe Male France Sam Tomashi Male D.R.Congo Molly Akinyi Female Kenya John Doe Male France Sam Tomashi Male D.R.Congo Molly Akinyi Female Kenya John Doe Male France Sam Tomashi Male D.R.Congo Molly Akinyi Female Kenya John Doe Male France Sam Tomashi Male D.R.Congo Molly Akinyi Female Kenya John Doe Male France 讨论(0)
加载中...
- 热议问题