t510599/2021
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Fix] navbar error highlighting & mobile detection

Browse Source 
scroll to anchor after the page loaded
move mobile detection from mounted to created to detect earlier
This commit is contained in:
Tony Yang 2021-02-05 01:23:40 +08:00
parent 0dfdd04a20
commit b21bb266b1
Signed by: t510599
GPG Key ID: D88388851C28715D
1 changed files with 32 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/news/Navbar.vue
View File

@ -43,29 +43,40 @@ export default class Navbar extends Vue {
'#precautions' '#precautions'
]; ];
public mounted () { public created () {
this.$nextTick().then(() => { const query: string = '(max-width: 1024px)';
const query: string = '(max-width: 1024px)'; const mq: MediaQueryList = window.matchMedia(query);
const mq: MediaQueryList = window.matchMedia(query); if (mq.addEventListener) {
if (mq.addEventListener) { mq.addEventListener('change', this.matchMediaCallback);
mq.addEventListener('change', this.matchMediaCallback); } else {
} else { // for sad safari
mq.addListener(this.matchMediaCallback); mq.addListener(this.matchMediaCallback);
} }
// check first // check first
this.matchMediaCallback(mq); this.matchMediaCallback(mq);
}
// observe header: header appears => no fix; header disappears => fix. public mounted () {
const fixObserver: IntersectionObserver = new IntersectionObserver((entries, observer) => { // observe header: header appears => no fix; header disappears => fix.
entries.forEach((entry) => { const fixObserver: IntersectionObserver = new IntersectionObserver((entries, observer) => {
if (!entry.isIntersecting) { entries.forEach((entry) => {
this.isNavbarFixed = true; if (!entry.isIntersecting) {
} else { this.isNavbarFixed = true;
this.isNavbarFixed = false; } else {
} this.isNavbarFixed = false;
}); }
}, { rootMargin: '25px 0px 0px 0px', threshold: 0 }); });
}, { rootMargin: '25px 0px 0px 0px', threshold: 0 });
this.$nextTick().then(() => {
fixObserver.observe(document.querySelector('#news-header') as Element); fixObserver.observe(document.querySelector('#news-header') as Element);
if (location.hash) {
const hash = location.hash;
// scroll to anchor
// value should be changed to scroll, so set to empty string first.
location.hash = '';
location.hash = hash;
}
}); });
} }