AlwaysVisibleControlExtender

The AlwaysVisibleControlExtender keeps a control visible in a fixed position on the screen even when the user scrolls the page. This is useful for floating toolbars, help buttons, notification areas, or sticky navigation elements that should remain accessible at all times.

Original Ajax Control Toolkit documentation: https://www.asp.net/ajax/ajaxcontroltoolkit/AlwaysVisibleControlExtender

Features Supported in Blazor

TargetControlID — ID of the element to keep visible
HorizontalOffset — Pixels from the horizontal edge
VerticalOffset — Pixels from the vertical edge
HorizontalSide — Which horizontal edge (Left, Center, Right)
VerticalSide — Which vertical edge (Top, Middle, Bottom)
ScrollEffectDuration — Animation duration in seconds
UseAnimation — Whether to animate position changes
Enabled — Enable or disable the extender behavior
BehaviorID — Optional identifier for JavaScript behavior lookup

HorizontalSide Enum

Controls horizontal positioning:

enum HorizontalSide
{
    Left = 0,
    Center = 1,
    Right = 2
}

VerticalSide Enum

Controls vertical positioning:

enum VerticalSide
{
    Top = 0,
    Middle = 1,
    Bottom = 2
}

Web Forms Syntax

<asp:Panel ID="pnlHelp" runat="server" style="width: 250px; padding: 10px; background-color: #e3f2fd; border: 1px solid #1976d2;">
    <strong>Need Help?</strong>
    <p>Click here to get started.</p>
</asp:Panel>

<ajaxToolkit:AlwaysVisibleControlExtender
    ID="sticky1"
    runat="server"
    TargetControlID="pnlHelp"
    HorizontalSide="Right"
    VerticalSide="Bottom"
    HorizontalOffset="20"
    VerticalOffset="20"
    UseAnimation="true"
    ScrollEffectDuration="0.1" />

Blazor Migration

<Panel ID="pnlHelp" style="width: 250px; padding: 10px; background-color: #e3f2fd; border: 1px solid #1976d2;">
    <strong>Need Help?</strong>
    <p>Click here to get started.</p>
</Panel>

<AlwaysVisibleControlExtender
    TargetControlID="pnlHelp"
    HorizontalSide="HorizontalSide.Right"
    VerticalSide="VerticalSide.Bottom"
    HorizontalOffset="20"
    VerticalOffset="20"
    UseAnimation="true"
    ScrollEffectDuration="0.1" />

Migration is simple: Remove the ajaxToolkit: prefix and runat="server". Use enum type names for positioning!

Properties Reference

Property	Type	Default	Description
`TargetControlID`	`string`	(required)	ID of the element to keep visible
`HorizontalOffset`	`int`	`0`	Number of pixels from the horizontal edge
`VerticalOffset`	`int`	`0`	Number of pixels from the vertical edge
`HorizontalSide`	`HorizontalSide`	`Left`	Which horizontal edge to position against (Left, Center, Right)
`VerticalSide`	`VerticalSide`	`Top`	Which vertical edge to position against (Top, Middle, Bottom)
`ScrollEffectDuration`	`float`	`0.1`	Duration of the position animation in seconds
`UseAnimation`	`bool`	`true`	Whether to animate position changes smoothly
`BehaviorID`	`string`	TargetControlID	Optional identifier for JavaScript behavior lookup
`Enabled`	`bool`	`true`	Whether the extender is active

Usage Examples

Sticky Help Button (Bottom-Right)

@rendermode InteractiveServer

<Panel ID="pnlHelp" style="width: 200px; padding: 15px; background-color: #4CAF50; color: white; border-radius: 5px; cursor: pointer;">
    <strong>?</strong> Need Help?
</Panel>

<AlwaysVisibleControlExtender
    TargetControlID="pnlHelp"
    HorizontalSide="HorizontalSide.Right"
    VerticalSide="VerticalSide.Bottom"
    HorizontalOffset="15"
    VerticalOffset="15"
    UseAnimation="true" />

Sticky Navigation (Top)

@rendermode InteractiveServer

<Panel ID="pnlNav" style="width: 100%; padding: 10px; background-color: #333; color: white;">
    <a href="#" style="color: white; margin-right: 20px;">Home</a>
    <a href="#" style="color: white; margin-right: 20px;">Products</a>
    <a href="#" style="color: white; margin-right: 20px;">Contact</a>
</Panel>

<AlwaysVisibleControlExtender
    TargetControlID="pnlNav"
    HorizontalSide="HorizontalSide.Center"
    VerticalSide="VerticalSide.Top"
    VerticalOffset="0"
    UseAnimation="false" />

Floating Notification (Top-Right)

@rendermode InteractiveServer

<Panel ID="pnlNotification" style="width: 300px; padding: 15px; background-color: #FFC107; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);">
    <strong>Alert:</strong> You have 3 new messages.
</Panel>

<AlwaysVisibleControlExtender
    TargetControlID="pnlNotification"
    HorizontalSide="HorizontalSide.Right"
    VerticalSide="VerticalSide.Top"
    HorizontalOffset="20"
    VerticalOffset="20"
    UseAnimation="true"
    ScrollEffectDuration="0.2" />

Sticky Side Panel (Left)

@rendermode InteractiveServer

<Panel ID="pnlSidebar" style="width: 250px; padding: 20px; background-color: #f5f5f5; border-right: 1px solid #ccc;">
    <h3>Quick Links</h3>
    <ul>
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Profile</a></li>
    </ul>
</Panel>

<AlwaysVisibleControlExtender
    TargetControlID="pnlSidebar"
    HorizontalSide="HorizontalSide.Left"
    VerticalSide="VerticalSide.Top"
    VerticalOffset="0"
    UseAnimation="true" />

HTML Output

The AlwaysVisibleControlExtender produces no HTML itself — it attaches JavaScript behavior to the target element, repositioning it as the user scrolls.

JavaScript Interop

The AlwaysVisibleControlExtender loads always-visible-control-extender.js as an ES module. JavaScript handles:

Monitoring window scroll events
Calculating fixed position based on offsets and sides
Updating element position as user scrolls
Optional animation of position changes
Handling window resize events
Maintaining element visibility within viewport

Render Mode Requirements

The AlwaysVisibleControlExtender requires InteractiveServer render mode:

@rendermode InteractiveServer

Graceful Degradation

SSR/Static mode: The extender silently skips initialization. The element displays at its normal position without scrolling.
JavaScript disabled: Same as SSR — Element does not stick to viewport.

Migration Notes

From Web Forms Ajax Toolkit

Remove ajaxToolkit: prefix

- <ajaxToolkit:AlwaysVisibleControlExtender
+ <AlwaysVisibleControlExtender

Remove runat="server" and ID attributes

Use enum types for positioning

- HorizontalSide="Right"
+ HorizontalSide="HorizontalSide.Right"

Before (Web Forms)

<asp:Panel ID="pnlHelp" runat="server" style="width: 250px; padding: 10px; background: #e3f2fd;">
    <p>Help content</p>
</asp:Panel>

<ajaxToolkit:AlwaysVisibleControlExtender
    ID="sticky1"
    TargetControlID="pnlHelp"
    HorizontalSide="Right"
    VerticalSide="Bottom"
    HorizontalOffset="20"
    VerticalOffset="20"
    runat="server" />

After (Blazor)

<Panel ID="pnlHelp" style="width: 250px; padding: 10px; background: #e3f2fd;">
    <p>Help content</p>
</Panel>

<AlwaysVisibleControlExtender
    TargetControlID="pnlHelp"
    HorizontalSide="HorizontalSide.Right"
    VerticalSide="VerticalSide.Bottom"
    HorizontalOffset="20"
    VerticalOffset="20" />

Best Practices

Use appropriate sizes — Keep sticky elements reasonably sized so they don't block content
Position wisely — Use corners or edges to avoid covering main content
Add offsets — Use HorizontalOffset and VerticalOffset to keep space from viewport edges
Consider mobile — Sticky elements on small screens can be intrusive; test responsiveness
Use animation — Enable UseAnimation for smooth repositioning as user scrolls
Include close button — Consider adding a close button to let users hide the sticky element

Troubleshooting

Issue	Solution
Element not staying visible	Verify `TargetControlID` matches the element's ID. Ensure `@rendermode InteractiveServer` is set.
Element covers content	Adjust `HorizontalOffset`, `VerticalOffset`, or position values. Choose a different corner.
Animation is jerky	Reduce `ScrollEffectDuration` (try 0.05-0.15 seconds) or disable `UseAnimation`.
Element disappears on scroll	Check element's `position` CSS property. The extender uses `position: fixed` internally.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

AlwaysVisibleControlExtender

Features Supported in Blazor

HorizontalSide Enum

VerticalSide Enum

Web Forms Syntax

Blazor Migration

Properties Reference

Usage Examples

Sticky Help Button (Bottom-Right)

Sticky Navigation (Top)

Floating Notification (Top-Right)

Sticky Side Panel (Left)

HTML Output

JavaScript Interop

Render Mode Requirements

Graceful Degradation

Migration Notes

From Web Forms Ajax Toolkit

Before (Web Forms)

After (Blazor)

Best Practices

Troubleshooting

See Also

FilesExpand file tree

AlwaysVisibleControlExtender.md

Latest commit

History

AlwaysVisibleControlExtender.md

File metadata and controls

AlwaysVisibleControlExtender

Features Supported in Blazor

HorizontalSide Enum

VerticalSide Enum

Web Forms Syntax

Blazor Migration

Properties Reference

Usage Examples

Sticky Help Button (Bottom-Right)

Sticky Navigation (Top)

Floating Notification (Top-Right)

Sticky Side Panel (Left)

HTML Output

JavaScript Interop

Render Mode Requirements

Graceful Degradation

Migration Notes

From Web Forms Ajax Toolkit

Before (Web Forms)

After (Blazor)

Best Practices

Troubleshooting

See Also