Maybe its the z-index of my .tc-story-river I should be modifying?
Here are the contents of my $:/themes/tiddlywiki/vanilla/sticky
.tc-tiddler-title { position: -webkit-sticky; position: -moz-sticky;
position: -o-sticky; position: -ms-sticky; position: sticky; top: 40px;
background: #ffffff; z-index: 500; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+1) { z-index: 199; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+2) { z-index: 198; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+3) { z-index: 197; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+4) { z-index: 196; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+5) { z-index: 195; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+6) { z-index: 194; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+7) { z-index: 193; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+8) { z-index: 192; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+9) { z-index: 191; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+10) { z-index: 190; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+11) { z-index: 189; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+12) { z-index: 188; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+13) { z-index: 187; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+14) { z-index: 186; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+15) { z-index: 185; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+16) { z-index: 184; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+17) { z-index: 183; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+18) { z-index: 182; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+19) { z-index: 181; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+20) { z-index: 180; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+21) { z-index: 179; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+22) { z-index: 178; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+23) { z-index: 177; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+24) { z-index: 176; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+25) { z-index: 175; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+26) { z-index: 174; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+27) { z-index: 173; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+28) { z-index: 172; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+29) { z-index: 171; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+30) { z-index: 170; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+31) { z-index: 169; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+32) { z-index: 168; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+33) { z-index: 167; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+34) { z-index: 166; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+35) { z-index: 165; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+36) { z-index: 164; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+37) { z-index: 163; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+38) { z-index: 162; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+39) { z-index: 161; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+40) { z-index: 160; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+41) { z-index: 159; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+42) { z-index: 158; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+43) { z-index: 157; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+44) { z-index: 156; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+45) { z-index: 155; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+46) { z-index: 154; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+47) { z-index: 153; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+48) { z-index: 152; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+49) { z-index: 151; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+50) { z-index: 150; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+51) { z-index: 149; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+52) { z-index: 148; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+53) { z-index: 147; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+54) { z-index: 146; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+55) { z-index: 145; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+56) { z-index: 144; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+57) { z-index: 143; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+58) { z-index: 142; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+59) { z-index: 141; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+60) { z-index: 140; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+61) { z-index: 139; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+62) { z-index: 138; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+63) { z-index: 137; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+64) { z-index: 136; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+65) { z-index: 135; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+66) { z-index: 134; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+67) { z-index: 133; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+68) { z-index: 132; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+69) { z-index: 131; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+70) { z-index: 130; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+71) { z-index: 129; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+72) { z-index: 128; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+73) { z-index: 127; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+74) { z-index: 126; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+75) { z-index: 125; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+76) { z-index: 124; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+77) { z-index: 123; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+78) { z-index: 122; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+79) { z-index: 121; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+80) { z-index: 120; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+81) { z-index: 119; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+82) { z-index: 118; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+83) { z-index: 117; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+84) { z-index: 116; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+85) { z-index: 115; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+86) { z-index: 114; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+87) { z-index: 113; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+88) { z-index: 112; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+89) { z-index: 111; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+90) { z-index: 110; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+91) { z-index: 109; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+92) { z-index: 108; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+93) { z-index: 107; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+94) { z-index: 106; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+95) { z-index: 105; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+96) { z-index: 104; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+97) { z-index: 103; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+98) { z-index: 102; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+99) { z-index: 101; } .tc-story-river
.tc-tiddler-frame:nth-child(100n+100) { z-index: 100; }
On Sunday, November 15, 2020 at 4:21:55 PM UTC+8 BurningTreeC wrote:
> Hi @Sapphireslinger, maybe this is a z-index issue and you could try
> adding a high (enough) z-index to your top toolbar
>
> BTC
>
> Sapphireslinger schrieb am Sonntag, 15. November 2020 um 08:09:04 UTC+1:
>
>> @ TW Tones
>>
>> I discovered that yesterday, and it made sticky the non-sticky *Edit
>> Toolbar* I'd been tolerating for a year : ) but it still didn't make the
>> *Page
>> Toolbar* sticky : (
>>
>> The Story View keeps scrolling over it and rendering it unusable.
>>
>> On Sunday, November 15, 2020 at 10:13:54 AM UTC+8 TW Tones wrote:
>>
>>> I just saw this but I think this may be what you are looking for.
>>>
>>> $:/themes/tiddlywiki/vanilla/sticky
>>> <http://127.0.4.81/IndexWikis/TW5References/index.html#%24%3A%2Fthemes%2Ftiddlywiki%2Fvanilla%2Fsticky>
>>>
>>> and set Top to 40px as an example for the Menu bar plugin.
>>> Or create a separate stylesheet with this override.
>>>
>>> I think the menu bar plugin now includes this setting internally.
>>>
>>> Regards
>>> Tones
>>>
>>>
>>>
>>> On Sunday, 15 November 2020 at 02:34:37 UTC+11 Sapphireslinger wrote:
>>>
>>>> It's late where I am, I'll have to come back to this thread tomorrow.
>>>> Thank you so much for all the suggestions.
>>>>
>>>> On Saturday, November 14, 2020 at 11:31:38 PM UTC+8 Sapphireslinger
>>>> wrote:
>>>>
>>>>> @Brian Radspinner
>>>>>
>>>>> I made a tiddler tagged with *$:/tags/PageTemplate *and put this in
>>>>> it: *<div class="tc-adjust-top-of-scroll"
>>>>> style="height:30px;position:absolute;left:0;right:0;
>>>>> top:0;visibility:hidden;">This DIV is just here to give a height for the
>>>>> top bar, and apply the TC-ADJUST-TOP-OF-SCROLL class for TiddlyWiki to
>>>>> have
>>>>> tiddler title bars not end up behind the top bar. It won't be seen on the
>>>>> page.</div>*
>>>>>
>>>>> I then saved my Tiddlywiki, but nothing changed, tiddlers still
>>>>> scrolled over the toolbar.
>>>>> On Saturday, November 14, 2020 at 11:12:36 PM UTC+8 Sapphireslinger
>>>>> wrote:
>>>>>
>>>>>> Here you can see the Page Toolbar covered up when the Story View was
>>>>>> scrolled upwards.
>>>>>>
>>>>>> [image: Screenshot from 2020-11-14 23-10-55.png]
>>>>>>
>>>>>>
>>>>>> On Saturday, November 14, 2020 at 11:09:16 PM UTC+8 Sapphireslinger
>>>>>> wrote:
>>>>>>
>>>>>>> Sorry the design is so lame. It's so I can use it on my smartphone
>>>>>>> as well as my desktop computer. When using this on my smartphone the
>>>>>>> right
>>>>>>> hand column tiddlers (I believe they are all tagged as sidebar
>>>>>>> segments)
>>>>>>> float to the top and do NOT cover the Page Toolbar.
>>>>>>>
>>>>>>> The left-hand column is the story view tiddlers. On my smartphone,
>>>>>>> they all show up below the right-hand column tiddlers.
>>>>>>>
>>>>>>> On Saturday, November 14, 2020 at 11:01:31 PM UTC+8 Sapphireslinger
>>>>>>> wrote:
>>>>>>>
>>>>>>>> [image: Screenshot from 2020-11-14 23-00-02.png]
>>>>>>>>
>>>>>>>> On Saturday, November 14, 2020 at 10:48:10 PM UTC+8 BurningTreeC
>>>>>>>> wrote:
>>>>>>>>
>>>>>>>>> Hi @Sapphireslinger, no it's neither your TopBar/Menu or your
>>>>>>>>> PageTemplate. A screenshot of your Top Bar would be very helpful
>>>>>>>>>
>>>>>>>>> BTC
>>>>>>>>>
>>>>>>>>> Sapphireslinger schrieb am Samstag, 14. November 2020 um 15:41:07
>>>>>>>>> UTC+1:
>>>>>>>>>
>>>>>>>>>> @BurningTreeC
>>>>>>>>>>
>>>>>>>>>> Is it my *$:/core/ui/TopBar/menu* tiddler?
>>>>>>>>>>
>>>>>>>>>> Here's what it says:
>>>>>>>>>>
>>>>>>>>>> <$reveal state="$:/state/sidebar" type="nomatch" text="no">
>>>>>>>>>> <$button set="$:/state/sidebar" setTo="no"
>>>>>>>>>> tooltip={{$:/language/Buttons/HideSideBar/Hint}}
>>>>>>>>>> aria-label={{$:/language/Buttons/HideSideBar/Caption}}
>>>>>>>>>> class="tc-btn-invisible">{{$:/core/images/chevron-right}}</$button>
>>>>>>>>>> </$reveal>
>>>>>>>>>> <$reveal state="$:/state/sidebar" type="match" text="no">
>>>>>>>>>> <$button set="$:/state/sidebar" setTo="yes"
>>>>>>>>>> tooltip={{$:/language/Buttons/ShowSideBar/Hint}}
>>>>>>>>>> aria-label={{$:/language/Buttons/ShowSideBar/Caption}}
>>>>>>>>>> class="tc-btn-invisible">{{$:/core/images/chevron-left}}</$button>
>>>>>>>>>> </$reveal>
>>>>>>>>>>
>>>>>>>>>> Is it my $:/core/ui/PageTemplate
>>>>>>>>>>
>>>>>>>>>> Here's what it says:
>>>>>>>>>>
>>>>>>>>>> \whitespace trim
>>>>>>>>>> \define containerClasses()
>>>>>>>>>> tc-page-container tc-page-view-$(storyviewTitle)$
>>>>>>>>>> tc-language-$(languageTitle)$
>>>>>>>>>> \end
>>>>>>>>>> \import [[$:/core/ui/PageMacros]]
>>>>>>>>>> [all[shadows+tiddlers]tag[$:/tags/Macro]!has[draft.of]]
>>>>>>>>>>
>>>>>>>>>> <$set name="tv-config-toolbar-icons"
>>>>>>>>>> value={{$:/config/Toolbar/Icons}}>
>>>>>>>>>>
>>>>>>>>>> <$set name="tv-config-toolbar-text"
>>>>>>>>>> value={{$:/config/Toolbar/Text}}>
>>>>>>>>>>
>>>>>>>>>> <$set name="tv-config-toolbar-class"
>>>>>>>>>> value={{$:/config/Toolbar/ButtonClass}}>
>>>>>>>>>>
>>>>>>>>>> <$set name="tv-enable-drag-and-drop"
>>>>>>>>>> value={{$:/config/DragAndDrop/Enable}}>
>>>>>>>>>>
>>>>>>>>>> <$set name="tv-show-missing-links"
>>>>>>>>>> value={{$:/config/MissingLinks}}>
>>>>>>>>>>
>>>>>>>>>> <$set name="storyviewTitle" value={{$:/view}}>
>>>>>>>>>>
>>>>>>>>>> <$set name="languageTitle" value={{{ [{$:/language}get[name]] }}}>
>>>>>>>>>>
>>>>>>>>>> <div class=<<containerClasses>>>
>>>>>>>>>>
>>>>>>>>>> <$navigator story="$:/StoryList" history="$:/HistoryList"
>>>>>>>>>> openLinkFromInsideRiver={{$:/config/Navigation/openLinkFromInsideRiver}}
>>>>>>>>>>
>>>>>>>>>> openLinkFromOutsideRiver={{$:/config/Navigation/openLinkFromOutsideRiver}}
>>>>>>>>>>
>>>>>>>>>> relinkOnRename={{$:/config/RelinkOnRename}}>
>>>>>>>>>>
>>>>>>>>>> <$dropzone enable=<<tv-enable-drag-and-drop>>>
>>>>>>>>>>
>>>>>>>>>> <$list
>>>>>>>>>> filter="[all[shadows+tiddlers]tag[$:/tags/PageTemplate]!has[draft.of]]"
>>>>>>>>>>
>>>>>>>>>> variable="listItem">
>>>>>>>>>>
>>>>>>>>>> <$transclude tiddler=<<listItem>>/>
>>>>>>>>>>
>>>>>>>>>> </$list>
>>>>>>>>>>
>>>>>>>>>> </$dropzone>
>>>>>>>>>>
>>>>>>>>>> </$navigator>
>>>>>>>>>>
>>>>>>>>>> </div>
>>>>>>>>>>
>>>>>>>>>> </$set>
>>>>>>>>>>
>>>>>>>>>> </$set>
>>>>>>>>>>
>>>>>>>>>> </$set>
>>>>>>>>>>
>>>>>>>>>> </$set>
>>>>>>>>>>
>>>>>>>>>> </$set>
>>>>>>>>>>
>>>>>>>>>> </$set>
>>>>>>>>>>
>>>>>>>>>> </$set>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> On Saturday, November 14, 2020 at 10:21:41 PM UTC+8 Brian
>>>>>>>>>> Radspinner wrote:
>>>>>>>>>>
>>>>>>>>>>> Whatever tiddler you have that holds the top bar, give it the
>>>>>>>>>>> class of "*$:/tags/PageTemplate*". The height of that tiddler
>>>>>>>>>>> should be the new scroll margin.
>>>>>>>>>>>
>>>>>>>>>>> An alternative is to have a tiddler just made to be that margin:
>>>>>>>>>>>
>>>>>>>>>>> Put the following in the body of a new tiddler...
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>> *<div class="tc-adjust-top-of-scroll"
>>>>>>>>>>> style="height:30px;position:absolute;left:0;right:0;
>>>>>>>>>>> top:0;visibility:hidden;">This DIV is just here to give a height
>>>>>>>>>>> for the
>>>>>>>>>>> top bar, and apply the TC-ADJUST-TOP-OF-SCROLL class for TiddlyWiki
>>>>>>>>>>> to have
>>>>>>>>>>> tiddler title bars not end up behind the top bar. It won't be seen
>>>>>>>>>>> on the
>>>>>>>>>>> page.</div>*
>>>>>>>>>>>
>>>>>>>>>>> On Saturday, November 14, 2020 at 7:12:10 AM UTC-7
>>>>>>>>>>> Sapphireslinger wrote:
>>>>>>>>>>>
>>>>>>>>>>>> I'm so sorry, I don't know what the name of the Page Toolbar
>>>>>>>>>>>> tiddler is.
>>>>>>>>>>>>
>>>>>>>>>>>> I know I should go to "More" and then click on either "Shadows"
>>>>>>>>>>>> or "System" but I don't know how to find the Page Toolbar tiddler.
>>>>>>>>>>>>
>>>>>>>>>>>> On Saturday, November 14, 2020 at 9:54:47 PM UTC+8 BurningTreeC
>>>>>>>>>>>> wrote:
>>>>>>>>>>>>
>>>>>>>>>>>>> @Sapphireslinger, it would be helpful if you showed how your
>>>>>>>>>>>>> Page Toolbar looks like... And the code it uses
>>>>>>>>>>>>>
>>>>>>>>>>>>> BTC
>>>>>>>>>>>>>
>>>>>>>>>>>>> BurningTreeC schrieb am Samstag, 14. November 2020 um 14:53:34
>>>>>>>>>>>>> UTC+1:
>>>>>>>>>>>>>
>>>>>>>>>>>>>> Hi @Sapphireslinger, have you tried adding the class
>>>>>>>>>>>>>> "tc-adjust-top-of-scroll" to your top Page Toolbar?
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> BTC
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> Sapphireslinger schrieb am Samstag, 14. November 2020 um
>>>>>>>>>>>>>> 14:10:58 UTC+1:
>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> Thank you for your suggestion. Unfortunately, I aleardy
>>>>>>>>>>>>>>> tried that, and it didn't work. I changed the 30 px to 300 px.
>>>>>>>>>>>>>>> The result:
>>>>>>>>>>>>>>> Tiddlers still scroll entirely up over the viewable part of the
>>>>>>>>>>>>>>> screen (And
>>>>>>>>>>>>>>> as always, I just see the covered up toolbar poking out the
>>>>>>>>>>>>>>> left side of
>>>>>>>>>>>>>>> the Story View, but the one icon visible is not clickable.)
>>>>>>>>>>>>>>> Only when I
>>>>>>>>>>>>>>> scroll all the way to the top does the entire "fixed" toolbar
>>>>>>>>>>>>>>> come into
>>>>>>>>>>>>>>> view, and I see that there is indeed a 300 px gap between the
>>>>>>>>>>>>>>> first tiddler
>>>>>>>>>>>>>>> and the toolbar.
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> On Saturday, November 14, 2020 at 8:41:22 PM UTC+8
>>>>>>>>>>>>>>> [email protected] wrote:
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> $:/ControlPanel -> Appearance -> Theme Tweaks -> Story top
>>>>>>>>>>>>>>>> position
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> On Saturday, November 14, 2020 at 12:54:19 PM UTC+1
>>>>>>>>>>>>>>>> Sapphireslinger wrote:
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> I am using Classic Story View with Vanilla Basic Theme
>>>>>>>>>>>>>>>>> (Blanca palette).
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> The Story View scrolls completely over my fixed Page
>>>>>>>>>>>>>>>>> Toolbar at the top of the screen, so that it is useless as a
>>>>>>>>>>>>>>>>> fixed toolbar
>>>>>>>>>>>>>>>>> (since I have to scroll back up to the top to see it anyway).
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> *How do I tell the top boundary of the story view to stop
>>>>>>>>>>>>>>>>> at, say, 30 px from the top?*
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/6d3a4205-b56e-464c-adee-882d0ccd13e8n%40googlegroups.com.
