Sidebar goes out of viewport after scroll down in custom page

[zq1997]

I agree and want to create new issue

• Yes, I was on Hexo Docs page, especially on Templates, Variables, Helpers and Troubleshooting.
• Yes, I was on NexT Documentation Site.
• And yes, I already searched for current issues and this is not help to me.

---

Expected behavior

After scolling down in some page, the side bar should fix on the side top.

I thought it is because .sidebar-inner.affix works.

Actual behavior

But for my custom page, the sidebar goes outside the viewport after scrolldown.

Steps to reproduce the behavior

Please go to my custom page and search anything, when results appeared, scroll down the page, you'll see the sidebar will goes out.

• Link to demo site with this issue: https://i-m.dev/tools/gsearch/

Node.js and NPM Information

v10.15.3
6.4.1

Package dependencies Information

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.8.0"
  },
  "dependencies": {
    "hexo": "^3.8.0",
    "hexo-deployer-rsync": "^0.1.3",
    "hexo-directory-category": "^1.0.7",
    "hexo-filter-mermaid-diagrams": "^1.0.5",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-baidu-sitemap": "^0.1.6",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-searchdb": "^1.0.8",
    "hexo-generator-sitemap": "^1.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-heading-index": "^1.0.1",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-kramed": "^0.1.4",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-server": "^0.3.3"
  }
}

Hexo Information

Hexo version

hexo: 3.8.0
hexo-cli: 1.1.0
os: Windows_NT 10.0.17134 win32 x64
http_parser: 2.8.0
node: 10.15.3
v8: 6.8.275.32-node.51
uv: 1.23.2
zlib: 1.2.11
ares: 1.15.0
modules: 64
nghttp2: 1.34.0
napi: 3
openssl: 1.1.0j
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e

NexT Information

NexT Version:

• Latest Master branch
• Latest Release version
• Old version

NexT Scheme:

• All schemes
• Muse
• Mist
• Pisces
• Gemini

[ivan-nginx]

What's the search service?

[zq1997]

I wrote a Google search crawler in python as backend, it collects the google searched page html content and send it back, then add the results into a container div .

Actually, I found out the root cause seems to be dynamic height, try to render the following html and you can also reproduce it.

<style>
#mydiv {
	width: 10em;
	height: 10em;
	background: green;
}
</style>

<div id='mydiv' onclick="this.style.height='100em'"></div>

[stevenjoezhang]

Actually, I found out the root cause seems to be dynamic height, try to render the following html and you can also reproduce it.

@zq-97 I used your html code, but could not reproduce the problem...
Are you using any other custom CSS? Could you check if they are the cause of the problem?

[zq1997]

Indeed I have some custom css but it's all about color and font, nothing to do with layout.
A very confusing problem.

[stevenjoezhang]

Sidebar position is controlled by https://github.com/theme-next/hexo-theme-next/blob/master/source/js/affix.js
Need to read the source code to determine the possible cause of the problem

GitHub

theme-next/hexo-theme-next

Elegant and powerful theme for Hexo. Contribute to theme-next/hexo-theme-next development by creating an account on GitHub.

[stevenjoezhang]

@zq-97

[zq1997]

The backends failed to work, so please don't take that page for reproduce.
I can still reproduce this issue by the following code

<style>
#mydiv {
	width: 10em;
	height: 10em;
	background: green;
}
</style>

<div id='mydiv' onclick="this.style.height='100em'"></div>

[stevenjoezhang]

Weird...

[zq1997]

Not for me

[stevenjoezhang]

Still can't reproduce... even on your site

[zq1997]

@stevenjoezhang I've updated to v7.30 but not work,
I have made a test page https://i-m.dev/test.html, could you reproduce it in this page.
note: I'm using Linux and reproduce it both on chrome and firefox

I'm dev

I'm dev

#mydiv { width: 10em; height: 10em; background: green; }

[stevenjoezhang]

@zq-97 I believe I have found the right answer. Could you please help to confirm whether this PR (#1039) has fixed the problem.

[zq1997]

I just noticed that #1039 is not merged till now, after a manual fix and the problem solved!

[stevenjoezhang]

I'm glad the problem is solved.. I'll merge #1039 after further confirmation

[stevenjoezhang]

Fixed in next-theme/hexo-theme-next@b9968b6