User:Atmark-chan/custom/FixedHeader.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

/* 開発中 */

var fixedHdr = document.createElement('div');
fixedHdr.id = 'p-personal-fixed';

var cloneUl = $('#p-personal ul').clone();
// var cloneLi = cloneUl.find($('li'));

// fixedHdr.appendChild(cloneUl);
fixedHdr.appendChild($('div#p-personal-fixed-child'));
console.log(fixedHdr);

mw.util.addCSS(
	'#p-personal-fixed {'
		+ 'background-color: lightgray;'
		+ 'border-bottom: aquamarine 10px solid;'
		+ 'position: fixed;'
		+ 'height: 20px;'
		+ 'width: 100%;'
		+ 'top: -20px;'
	+ '}'
	
	+ '#p-personal-fixed:active,'
	+ '#p-personal-fixed:hover {'
		+ 'top: 0px;'
	+ '}'
	
	+ '#p-personal-fixed-child {'
		+ 'height: 20px;'
		+ 'width: 20px;'
		+ 'background-color: aquamarine;'
		+ 'border-radius: 50%;'
		+ 'position: absolute;'
		+ 'bottom: -20px;'
		+ 'right: 20%;'
	+ '}'
);

document.body.appendChild(fixedHdr);